> ## 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.

# Tailwind Basics

> Learn to use Tailwind CSS classes in React Native with Uniwind. Covers utility classes, responsive breakpoints, dark mode, CSS variables, and platform selectors.

## Understanding Tailwind CSS

If you're new to Tailwind CSS, we highly recommend exploring the official [Tailwind documentation](https://tailwindcss.com/docs) to learn about utility classes, responsive design, and customization options.

## Working with Dynamic `classNames`

Uniwind uses the Tailwind parser to process your `className` strings at build time. This means that **dynamically constructed class names cannot be detected** by the Tailwind compiler, as explained in the [Tailwind guide on detecting classes](https://tailwindcss.com/docs/content-configuration#dynamic-class-names).

<Warning>
  Always use complete class names in your source code. Never construct class names using string interpolation or concatenation.
</Warning>

### ❌ Incorrect Usage

The following examples show common mistakes that prevent Tailwind from detecting your classes:

#### Example 1: String interpolation in class names

```tsx theme={null}
<View className="bg-{{ error ? 'red' : 'green' }}-600" />
```

**Why this doesn't work:** The Tailwind compiler cannot detect the classes `bg-red-600` and `bg-green-600` because they're constructed dynamically. Uniwind won't be able to precompile these classes, resulting in no styling.

#### Example 2: Template literals with variables

```tsx theme={null}
<Text className={`text-${props.color}`} />
```

**Why this doesn't work:** The Tailwind compiler cannot determine what `text-${props.color}` will be at runtime, so it won't generate the necessary styles.

### ✅ Correct Usage

Here are the recommended patterns for conditionally applying Tailwind classes:

#### Solution 1: Use complete class names with conditionals

```tsx theme={null}
<View className={error ? 'bg-red-600' : 'bg-green-600'} />
```

**Why this works:** The Tailwind compiler can detect both `bg-red-600` and `bg-green-600` because you've written out the complete class names.

#### Solution 2: Create a mapping object with complete class names

```tsx theme={null}
const colorVariants = {
  black: "bg-black text-white",
  blue: "bg-blue-500 text-white",
  white: "bg-white text-black",
};

<Text className={colorVariants[props.color]} />
```

**Why this works:** All possible class names are written in full within the `colorVariants` object, allowing Tailwind to detect and generate them at build time.

<Tip>
  You can use this pattern to create reusable style variants based on props, making your components more maintainable.
</Tip>

## Advanced Pattern: Variants and Compound Variants

For more complex component styling with multiple variants and conditions, we recommend using [tailwind-variants](https://www.tailwind-variants.org/), a popular open-source library that Uniwind fully supports.

Tailwind Variants allows you to:

* Define multiple style variants for your components
* Create compound variants (styles that apply when multiple conditions are met)
* Manage complex conditional styling in a clean, maintainable way

### Example with tailwind-variants

```tsx theme={null}
import { tv } from 'tailwind-variants';

const button = tv({
  base: 'font-semibold rounded-lg px-4 py-2',
  variants: {
    color: {
      primary: 'bg-blue-500 text-white',
      secondary: 'bg-gray-500 text-white',
      danger: 'bg-red-500 text-white',
    },
    size: {
      sm: 'text-sm',
      md: 'text-base',
      lg: 'text-lg',
    },
  },
  compoundVariants: [
    {
      color: 'primary',
      size: 'lg',
      class: 'bg-blue-600',
    },
  ],
  defaultVariants: {
    color: 'primary',
    size: 'md',
  },
});

// Usage
<Pressable className={button({ color: 'primary', size: 'lg' })}>
  <Text>Click me</Text>
</Pressable>
```

<Info>
  Learn more about tailwind-variants in their [official documentation](https://www.tailwind-variants.org/docs/introduction).
</Info>