Tailwind CSS Tips That Will Change How You Style

Beyond Utility Classes

Most developers learn Tailwind by mapping CSS properties to utility classes. That's the floor, not the ceiling. The real power comes from combining Tailwind with component patterns and design tokens.

The @apply Trap

Don't use @apply to recreate CSS class patterns. If you find yourself doing .btn { @apply px-4 py-2 rounded bg-blue-500; }, just create a React component instead. @apply belongs only in base layers.

Arbitrary Values Are Not Anti-Pattern

Tailwind allows arbitrary values like w-[347px]. New developers treat this as cheating. It's not — it's a safety valve for the occasional value that falls outside your design system. Use it without guilt, but sparingly.

Group and Peer Modifiers

These are underused. group-hover: lets a parent's hover state affect a child's styles. peer-checked: lets a sibling's state affect another sibling. Together they enable complex interactive states with zero JavaScript.

Responsive Design Done Right

Design mobile-first. Tailwind's responsive prefixes (md:, lg:) are additive — they apply at that breakpoint and above. Start with the mobile layout, then layer in the desktop adjustments.