iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Tailwind in React

By · Reviewed & last updated · Part of React Tutorial

Tailwind + React is the default stack for new SaaS UIs in 2026 - co-located styles, no naming overhead, and a design system that lives in tailwind.config.

React + Tailwind setup

EXAMPLE
// 1. Install
// npm install -D tailwindcss postcss autoprefixer
// npx tailwindcss init -p

// tailwind.config.js
export default {
  content: ['./index.html', './src/**/*.{ts,tsx}'],
  theme: {
    extend: {
      colors: { brand: { 500: '#3b82f6', 700: '#1d4ed8' } },
      fontFamily: { sans: ['Inter Variable', 'sans-serif'] },
    },
  },
  plugins: [],
};

// src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

// Typed component
type CardProps = { title: string; children: React.ReactNode };

export function Card({ title, children }: CardProps) {
  return (
    <div className='rounded-xl border border-gray-200 bg-white p-6 shadow-sm hover:shadow-md transition'>
      <h3 className='text-lg font-semibold text-gray-900'>{title}</h3>
      <div className='mt-2 text-sm text-gray-600'>{children}</div>
    </div>
  );
}

// Variants with clsx
import clsx from 'clsx';

type ButtonProps = {
  variant?: 'primary' | 'secondary';
  size?: 'sm' | 'md';
  children: React.ReactNode;
};

export function Button({ variant = 'primary', size = 'md', children }: ButtonProps) {
  return (
    <button
      className={clsx(
        'rounded font-medium transition focus:outline-none focus:ring-2',
        variant === 'primary' && 'bg-brand-500 text-white hover:bg-brand-700 focus:ring-brand-500',
        variant === 'secondary' && 'bg-gray-100 text-gray-900 hover:bg-gray-200',
        size === 'sm' && 'px-2 py-1 text-sm',
        size === 'md' && 'px-4 py-2 text-base'
      )}
    >
      {children}
    </button>
  );
}

// Dark mode
// In tailwind.config.js: darkMode: 'class'
// In your html root: document.documentElement.classList.toggle('dark')
// Use: bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100

Why it matters

Tailwind classes look noisy until you build the muscle - then they read like a design spec. Reach for clsx (or cva) once you have variants; reach for an extracted component once a class string appears three times.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
<button className="px-4 py-2 bg-green-600 text-white rounded">Save</button>
Try it Yourself »

Discussion

Loading…