Tailwind CSS Integration

The idea

Instead of writing CSS in a separate file, you compose small utility classes in the markup.

<div className="rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
  <h2 className="mb-2 text-xl font-bold text-gray-900">Title</h2>
  <p className="text-gray-600">Body text</p>
</div>

Why people like it: no naming, no separate file, no dead CSS, and you can see exactly what an element looks like without leaving it.

Why people dislike it: the markup gets long, and there is a vocabulary to learn.

Whichever camp you land in, it is extremely common in React, so it is worth knowing.

Setting up

npm install tailwindcss @tailwindcss/vite

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({
  plugins: [react(), tailwindcss()]
});

@import 'tailwindcss';

Tailwind 4 configures itself in CSS rather than a JavaScript config file, which is a change from version 3. If a tutorial shows you tailwind.config.js with a content array, it is for the older version.

Theming in CSS

@import 'tailwindcss';
@theme {
  --color-brand: oklch(0.55 0.2 280);
  --color-brand-light: oklch(0.75 0.15 280);
  --font-display: 'Inter', sans-serif;
  --spacing-huge: 8rem;
}

Those become utilities automatically: bg-brand, text-brand-light, font-display, p-huge.

Because they are CSS custom properties, they are also available to any plain CSS you write, and they can be changed at runtime for theming.

Conditional classes

This is where React and Tailwind meet, and it needs a helper.

<button className={`px-4 py-2 rounded ${isActive ? 'bg-blue-500' : 'bg-gray-200'}`}>

Template literals get unreadable fast and leave stray spaces. Use clsx:

npm install clsx tailwind-merge

import clsx from 'clsx';
function Button({ variant, size, isDisabled, className }) {
  return (
    <button
      className={clsx(
        'rounded font-medium transition-colors',
        variant === 'primary' && 'bg-blue-600 text-white hover:bg-blue-700',
        variant === 'ghost' && 'bg-transparent text-blue-600 hover:bg-blue-50',
        size === 'sm' && 'px-3 py-1 text-sm',
        size === 'lg' && 'px-6 py-3 text-lg',
        isDisabled && 'cursor-not-allowed opacity-50',
        className
      )}
    >
      Click
    </button>
  );
}

clsx drops every falsy value, so only the classes you want survive.

The merge problem

<Button className="bg-red-500" />

If Button already applies bg-blue-600, you now have both. Which wins depends on their order in the generated stylesheet, not on which you passed. That is unpredictable.

tailwind-merge fixes it by removing conflicting utilities, keeping the last one:

import { twMerge } from 'tailwind-merge';
import clsx from 'clsx';
export function cn(...inputs) {
  return twMerge(clsx(inputs));
}

function Button({ className, ...rest }) {
  return (
    <button className={cn('rounded bg-blue-600 px-4 py-2 text-white', className)} {...rest} />
  );
}

Now className="bg-red-500" genuinely overrides. This cn helper is close to universal in Tailwind React projects, and it is what shadcn/ui uses.

Variants with CVA

Once a component has several variants, a chain of && gets messy.

npm install class-variance-authority

import { cva } from 'class-variance-authority';
const button = cva('rounded font-medium transition-colors', {
  variants: {
    variant: {
      primary: 'bg-blue-600 text-white hover:bg-blue-700',
      secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',
      ghost: 'bg-transparent text-blue-600 hover:bg-blue-50'
    },
    size: {
      sm: 'px-3 py-1 text-sm',
      md: 'px-4 py-2',
      lg: 'px-6 py-3 text-lg'
    }
  },
  defaultVariants: { variant: 'primary', size: 'md' }
});
function Button({ variant, size, className, ...rest }) {
  return <button className={cn(button({ variant, size }), className)} {...rest} />;
}

The variants are declared in one readable object, and with TypeScript the prop types come from it automatically.

Keeping markup readable

The honest criticism of Tailwind is long class strings. Three things help.

Extract components, not classes. If you are repeating the same twelve utilities, that is a component.

function Card({ children }) {
  return (
    <div className="rounded-xl border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-900">
      {children}
    </div>
  );
}

Use the Prettier plugin, which sorts classes into a consistent order:

npm install --save-dev prettier-plugin-tailwindcss

Consistent order makes long strings scannable, and removes a category of pointless review comments.

Use @apply sparingly. It exists, and overusing it recreates the CSS file you were trying to avoid. Reach for a component first.

Dark mode

<div className="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">

By default this follows the system setting. For a manual toggle:

@import 'tailwindcss';
@custom-variant dark (&:where(.dark, .dark *));

function ThemeToggle() {
  const [theme, setTheme] = useState('light');
  useEffect(() => {
    document.documentElement.classList.toggle('dark', theme === 'dark');
  }, [theme]);
  return <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>Toggle</button>;
}

Quick recap

• Tailwind composes utility classes in the markup.
• Version 4 configures itself in CSS, not a JavaScript config file.
• @theme custom properties become utilities automatically.
• Use clsx for conditional classes.
• Use tailwind-merge so a passed className genuinely overrides.
• The combined cn helper is the standard pattern.
• CVA organises multi variant components.
• Extract components rather than classes, and sort with the Prettier plugin.