Advanced Tailwind CSS Patterns That Will Change How You Build UIs

Why Advanced Tailwind?

Most developers use Tailwind at 30% capacity. Here's how to unlock the rest.

Design Tokens with CSS Variables

Copy
css
:root {
  --color-brand: 16 185 129;
}
.dark {
  --color-brand: 52 211 153;
}

Copy
javascript
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: 'rgb(var(--color-brand) / <alpha-value>)',
      }
    }
  }
}

The cva Pattern

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

const button = cva('inline-flex items-center rounded-lg font-medium', {
  variants: {
    intent: {
      primary: 'bg-brand-500 text-white hover:bg-brand-600',
      ghost: 'bg-transparent hover:bg-gray-100',
    },
    size: {
      sm: 'px-3 py-1.5 text-sm',
      md: 'px-4 py-2 text-base',
    },
  },
  defaultVariants: { intent: 'primary', size: 'md' },
});

Conclusion

These patterns make Tailwind codebases maintainable at scale.