Mastering Tailwind CSS in React

Tailwind CSS has become a go-to for utility-first styling. This post dives deep into its capabilities when combined with React.

Component-Based Styling

We'll explore how to create reusable components with Tailwind by using libraries like cva (class-variance-authority) to manage variants.

import { cva } from 'class-variance-authority';

const button = cva("font-semibold border rounded-lg transition-colors", {
  variants: {
    intent: {
      primary: "bg-blue-500 hover:bg-blue-600 text-white border-blue-500",
      secondary: "bg-gray-200 hover:bg-gray-300 text-gray-800 border-gray-300",
      danger: "bg-red-500 hover:bg-red-600 text-white border-red-500",
    },
    size: {
      sm: "px-3 py-1 text-sm",
      md: "px-4 py-2",
      lg: "px-6 py-3 text-lg",
    },
  },
  defaultVariants: {
    intent: "primary",
    size: "md",
  },
});

This approach keeps your JSX clean and your styling logic co-located with your components.

Advanced Patterns

Custom CSS Properties

You can combine Tailwind with CSS custom properties for even more flexibility:

.theme-blue {
  --primary: 59 130 246;
  --primary-foreground: 255 255 255;
}

.theme-green {
  --primary: 34 197 94;
  --primary-foreground: 255 255 255;
}

Then use them in your Tailwind classes:

<button class="bg-[rgb(var(--primary))] text-[rgb(var(--primary-foreground))]">
  Dynamic Button
</button>

Responsive Design

Tailwind makes responsive design incredibly straightforward:

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <!-- Your content here -->
</div>

This creates a responsive grid that adapts to different screen sizes automatically.