Patterns and anti-patterns for using Tailwind in real projects — from component extraction to theme customization.
Tailwind at Scale
Tailwind works great for small projects out of the box. In larger codebases, a few patterns keep things maintainable.
Extract Components, Not Classes
When you see the same cluster of utility classes repeated three times, extract a component — not an @apply rule. Components encapsulate both the markup and the styles.
Bad:
.btn-primary { @apply px-4 py-2 bg-blue-600 rounded-lg text-white font-semibold; } Good: create a Button component with those classes directly in the JSX.
Use Tailwind Config for Design Tokens
Define your brand colors, spacing scale, and fonts in tailwind.config. This way bg-primary and text-primary reference your actual brand colors, not generic Tailwind palette names.
Avoid Arbitrary Values When Possible
w-[347px] is a code smell. If you find yourself using many arbitrary values, your design system might need more defined steps.
Exception: one-off page-specific layouts where an exact pixel value genuinely makes sense.
Responsive Prefixes Should Flow
Write mobile styles first, then add sm:, md:, lg: overrides. This matches the mobile-first approach and keeps the class list readable.
Dark Mode Strategy
Use dark: variant with a class-based strategy (not media queries) so users can toggle the theme explicitly. Pair this with CSS custom properties for colors that Tailwind does not have built-in.
Group Related Classes
In longer class strings, mentally group by concern:
// Layout → Spacing → Typography → Colors → Effects
className="flex items-center gap-3 px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors"
Consistent ordering makes scanning class lists faster.
Plugin Ecosystem
Before writing custom CSS, check if a Tailwind plugin exists. Typography, forms, container queries, and animations all have official or community plugins.
When Not to Use Tailwind
Tailwind is not always the answer. Complex animations, intricate SVG styling, and print stylesheets are often cleaner in plain CSS. Use both — Tailwind for layout and components, plain CSS for specialized needs.