Tailwind tips I wish I knew earlier

I've used Tailwind CSS on almost every project for the last three years. Here are patterns that leveled up my workflow.

1. `group` and `peer` utilities

These let you style children based on parent state, or siblings based on sibling state - without JavaScript.

<div class="group hover:bg-zinc-800">
  <p class="text-zinc-400 group-hover:text-white">Hover the parent</p>
</div>

2. Arbitrary values

Sometimes design specs don't align with the default scale. Use [] syntax:

<div class="w-85.5 mt-3.25">...</div>

3. `@apply` is a trap (mostly)

I used to use @apply everywhere. Now I avoid it - it defeats the purpose of utility classes and makes code harder to scan.

4. `clsx` + `twMerge`

For conditional classes, use clsx and tailwind-merge together:

import { clsx } from "clsx"
import { twMerge } from "tailwind-merge"

const cn = (...inputs) => twMerge(clsx(inputs))

This prevents class conflicts when extending components.