Mastering Tailwind CSS — Tips from 3 Years of Usage
Advanced Tailwind techniques, custom configurations, and patterns I've learned from building dozens of production sites.
Beyond the Basics
Most Tailwind tutorials stop at `flex justify-center`. Let me show you techniques that actually matter in production.
1. Custom Design Tokens
Stop using arbitrary values. Define them in your theme:
// tailwind.config.js
theme: {
extend: {
colors: {
'brand-primary': '#FBFF48',
'brand-secondary': '#FF70A6',
}
}
}
2. Component Patterns
Use `@apply` sparingly, but use it for base component styles:
.btn-neo {
@apply border-2 border-black px-4 py-2 font-bold shadow-hard
hover:translate-x-1 hover:translate-y-1 hover:shadow-none
transition-all;
}
3. Responsive Design Strategy
Always design mobile-first. Use `md:` and `lg:` prefixes to add complexity, not remove it.
The Golden Rule
If you're writing more than 15 utility classes on one element, it's time to extract a component.