Mastering Tailwind CSS in 2024

Why I Changed My Mind About Tailwind

Three years ago, I thought utility-first CSS was a mistake. "Why would anyone want to write class="mt-4 px-6 py-2 bg-blue-500"?" I asked. Today, I can't imagine building without it.

The Power of Design Tokens

Tailwind's configuration system is incredibly powerful:

JAVASCRIPT

1// tailwind.config.js
2module.exports = {
3  theme: {
4    extend: {
5      colors: {
6        brand: {
7          50: '#f0f9ff',
8          100: '#e0f2fe',
9          500: '#0ea5e9',
10          900: '#0c4a6e',
11        }
12      },
13      spacing: {
14        '18': '4.5rem',
15        '88': '22rem',
16      },
17      animation: {
18        'fade-in': 'fadeIn 0.5s ease-out',
19        'slide-up': 'slideUp 0.3s ease-out',
20      }
21    }
22  }
23}

Component Patterns

The CVA Approach

Class Variance Authority makes variant management elegant:

TypeScript (TSX)

1import { cva } from 'class-variance-authority';
2
3const button = cva(
4  'inline-flex items-center justify-center rounded-md font-medium transition-colors',
5  {
6    variants: {
7      intent: {
8        primary: 'bg-blue-500 text-white hover:bg-blue-600',
9        secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',
10        danger: 'bg-red-500 text-white hover:bg-red-600',
11      },
12      size: {
13        sm: 'h-8 px-3 text-sm',
14        md: 'h-10 px-4 text-base',
15        lg: 'h-12 px-6 text-lg',
16      }
17    },
18    defaultVariants: {
19      intent: 'primary',
20      size: 'md',
21    }
22  }
23);

Dark Mode Done Right

Tailwind's dark mode is elegant:

HTML

1<div class="bg-white dark:bg-gray-900">
2  <h1 class="text-gray-900 dark:text-white">
3    Automatic dark mode support
4  </h1>
5</div>

Performance Tips

1. Purge Unused Classes

JAVASCRIPT

1module.exports = {
2  content: [
3    './src/**/*.{js,ts,jsx,tsx}',
4  ],
5  // Tailwind v3+ automatically purges in production
6}

2. Use @apply Sparingly

Only for truly repeated patterns:

CSS

1@layer components {
2  .btn-primary {
3    @apply bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600;
4  }
5}

Conclusion

Tailwind CSS isn't just a utility framework—it's a design system accelerator. The key is understanding when to use utilities directly and when to abstract into components.