> ## Documentation Index
> Fetch the complete documentation index at: https://docs.uniwind.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# CSS Parser

> Write custom CSS classes alongside Tailwind in your React Native app

## Overview

Uniwind includes a built-in CSS parser that allows you to use traditional CSS alongside Tailwind utilities. While our primary focus is on Tailwind syntax, you can write custom CSS classes and use them directly in your React Native components.

<Info>
  We're actively seeking feedback to identify missing features and limitations. Your input helps us improve CSS support in Uniwind!
</Info>

## Why Use Custom CSS?

While Tailwind provides utility classes for most styling needs, custom CSS can be useful for:

* Complex, reusable component styles that would be verbose with utilities
* Migrating existing web codebases to React Native
* Defining design system components with consistent styling
* Advanced animations and transitions

## Basic Usage

Define custom CSS classes in your `global.css` file and use them with the `className` prop:

### CSS Definition

```css global.css theme={null}
.container {
    flex: 1;
    background-color: red;
    width: 50px;
    height: 50px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}
```

### Using in Components

```tsx theme={null}
import { View } from 'react-native'

export const MyComponent = () => (
  <View className="container" />
)
```

## Combining CSS Classes with Tailwind

You can seamlessly mix custom CSS classes with Tailwind utilities:

### CSS Definition

```css global.css theme={null}
.card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-header {
    font-size: 18px;
    font-weight: bold;
    color: #333;
}
```

### Usage with Tailwind

```tsx theme={null}
import { View, Text } from 'react-native'

export const Card = ({ title, children }) => (
  <View className="card p-4 m-2">
    <Text className="card-header mb-2">{title}</Text>
    <View className="flex-1">{children}</View>
  </View>
)
```

### Using light-dark() Function

Uniwind supports the CSS [`light-dark()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark) function, which provides a convenient way to define different values for light and dark themes:

```css theme={null}
.adaptive-card {
    background-color: light-dark(#ffffff, #1f2937);
    color: light-dark(#111827, #f9fafb);
    border-color: light-dark(#e5e7eb, #374151);
}
```

The first value is used in light mode, and the second value is used in dark mode. This automatically adapts when the theme changes.

```tsx theme={null}
<View className="adaptive-card p-4">
  {/* Colors automatically switch between light and dark themes */}
</View>
```

<Tip>
  The `light-dark()` function is particularly useful for maintaining color consistency across themes without needing separate CSS variables for each theme.
</Tip>

## Best Practices

<Tip>
  **Prefer Tailwind utilities for simple styles.** Use custom CSS classes for complex, reusable component patterns that would be verbose or repetitive with utility classes.
</Tip>

<Warning>
  **Avoid deeply nested selectors.** React Native's styling model is simpler than web CSS. Keep your selectors flat and component-scoped for best results.
</Warning>

### Recommended Pattern

```css theme={null}
/* ✅ Good: Component-scoped classes */
.product-card {
    background-color: white;
    border-radius: 12px;
    padding: 16px;
}

.product-card-image {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 8px;
}

.product-card-title {
    font-size: 18px;
    font-weight: bold;
    margin-top: 12px;
}
```

```css theme={null}
/* ❌ Avoid: Complex nested selectors */
.product-card .image-container .image .overlay .title {
    /* This is too complex for React Native */
}
```

## Performance Considerations

* **Compile-time parsing**: CSS is parsed at build time, not runtime, for optimal performance
* **No runtime overhead**: Custom CSS classes are converted to React Native styles during compilation

## Feedback & Feature Requests

<Info>
  The CSS parser is continuously evolving. We're actively looking for feedback to help identify missing features and limitations.
</Info>

<Card title="Share Your Feedback" icon="message" href="https://github.com/uni-stack/uniwind/discussions">
  Let us know what CSS features you need or issues you've encountered!
</Card>

## Related

<CardGroup cols={2}>
  <Card title="Tailwind Basics" icon="wind" href="/tailwind-basics">
    Learn how to use Tailwind utilities in Uniwind
  </Card>

  <Card title="Theming" icon="palette" href="/theming/basics">
    Discover theming and CSS variables in Uniwind
  </Card>
</CardGroup>