Skip to main content

​
Understanding Tailwind CSS

If you’re new to Tailwind CSS, we highly recommend exploring the official Tailwind documentation 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.
Always use complete class names in your source code. Never construct class names using string interpolation or concatenation.

​
❌ Incorrect Usage

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

​
Example 1: String interpolation in class names

<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

<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

<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

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.
You can use this pattern to create reusable style variants based on props, making your components more maintainable.

​
Advanced Pattern: Variants and Compound Variants

For more complex component styling with multiple variants and conditions, we recommend using tailwind-variants, 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

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>
Learn more about tailwind-variants in their official documentation.