Tailwind CSS Mastery: Advanced Patterns for Production Applications

Tailwind CSS goes beyond utility classes. Advanced patterns include custom design tokens, variant composition, and runtime theming.

Custom Design Tokens

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#eef2ff', 100: '#e0e7ff', 200: '#c7d2fe',
          500: '#6366f1', 600: '#4f46e5', 700: '#4338ca', 900: '#312e81',
        },
      },
      animation: {
        'slide-in': 'slideIn 0.3s ease-out',
        'fade-in': 'fadeIn 0.2s ease-in',
      },
    },
  },
}

Component Variants with CVA

import { cva, type VariantProps } from 'class-variance-authority'

const buttonVariants = cva(
  'inline-flex items-center justify-center rounded-lg font-medium transition-colors',
  {
    variants: {
      variant: {
        primary: 'bg-brand-600 text-white hover:bg-brand-700',
        secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200',
        outline: 'border border-gray-300 bg-transparent hover:bg-gray-50',
      },
      size: {
        sm: 'px-3 py-1.5 text-sm',
        md: 'px-4 py-2 text-sm',
        lg: 'px-6 py-3 text-base',
      },
    },
    defaultVariants: { variant: 'primary', size: 'md' },
  }
)

Dark Mode Patterns

Use the dark: variant with CSS custom properties for runtime theme switching:

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

The Bottom Line

The Admin Dashboard Pro from BreafIO demonstrates advanced Tailwind patterns with dark mode, responsive layouts, and component variants. The SaaS Landing Kit uses custom design tokens. The Component Library Starter provides CVA patterns. The Landing Page Bundle showcases animation utilities, and the Design System Manager helps scale Tailwind across teams.