1. One entry CSS file, no mystery pipeline
I start from a small global stylesheet that imports Tailwind once and layers my own base tweaks after Preflight if needed. With v4, the Vite plugin (@tailwindcss/vite) or the PostCSS package (@tailwindcss/postcss) replaces the old “three @tailwind directives + autoprefixer dance” for most apps. I pick one integration path per repo and document it in the README so the next developer is not guessing which file owns the build.
2. @theme is the design contract
Brand colors, font stacks, radii, spacing keys, and shadows belong in @theme, not scattered as arbitrary values in JSX. When marketing says “slightly bluer accent,” I change a token once and grep stays quiet. Arbitrary values are for one-off experiments; if a class repeats across files, it gets promoted to the theme or a tiny component layer.
3. Content discovery: explicit beats magical
Tailwind only generates what it sees. In v4 I rely on @source (or the defaults my bundler infers) so templates, MDX, and Blade/PHP partials are in the scan set. Missing utilities in production almost always trace to a path that was never registered—I fix that instead of sprinkling safelists everywhere.
4. Components: utilities first, @apply as a last resort
For React or Laravel views, I keep composition in the markup until a pattern is stable—usually three or more call sites. Then I extract either a component (same classes in one place) or a short CSS module with @apply for a “card,” “input,” or “pill” recipe. That order avoids premature abstraction and keeps Tailwind’s strength: local reasoning.
5. Speed is a habit, not a benchmark
The new engine’s job is to make iteration boring. I lean on small PRs, tight content globs, and fewer custom plugins than I carried in v2/v3-era projects. If build time creeps up, I audit dependencies and template includes before I blame the framework.
6. Maintainability checklist
- Tokens and semantic names live in
@theme; hex in JSX is a smell. - Dark mode and contrast variants use the same token map, not duplicate palettes.
- Layout primitives (stack, cluster, sidebar) get reusable class strings or components early—before every page invents flex from scratch.
Tailwind 4 does not replace judgment: it removes friction so judgment shows up in tokens, structure, and accessibility instead of fighting the stylesheet. That is the interface stack I want on a long-lived business product.