Tailwind for Client Sites Without the Mess
How I use Tailwind on Astro client projects so the codebase stays readable — tokens, composition patterns, and what not to put in class attributes.
- tailwind
- css
- astro
- frontend
- web development
Tailwind is fast to ship and easy to regret. On client sites I still use it often — with constraints so the markup doesn’t become a landfill of utility soup.
Start with a small design language
Before p-4 everywhere, define:
- A limited type scale
- Spacing rhythm (don’t invent a new gap on every section)
- Brand colors as CSS variables / theme tokens
- A few layout primitives (section width, stack, cluster)
Tailwind should express that system, not replace having one.
Prefer composition over copy-paste
Repeated class strings are a smell. Extract:
- Astro components for recurring sections (hero, prose, project row)
- Shared wrappers for max-width and vertical rhythm
@applysparingly for true primitives — not for every button variant under the sun
If three pages share the same 14-class heading block, that’s a component, not a coincidence.
Keep prose readable
Long articles and CMS portable text need calm typography. I usually pair Tailwind layout utilities with a dedicated prose style (or a constrained typography plugin) so body content isn’t hand-tuned per paragraph.
Editors shouldn’t inherit your experimental tracking on every <p>.
Resist the utility arms race
Things I avoid on client builds:
- Arbitrary values for every one-off (
top-[13px]) unless the design truly demands it - Dark-mode variants “just in case” when the brand is light-only
- Huge responsive stacks when a simpler fluid layout would do
- Mixing Tailwind with a second ad-hoc CSS methodology in the same feature
Constraints keep the diff reviewable when you revisit the project a year later.
Performance is mostly about discipline
Purge/content config matters, but so does not shipping unused component CSS from abandoned experiments. Delete dead sections. Don’t leave three hero variants in the repo “for later.”
When Tailwind isn’t the point
Design systems with heavy theming, or teams that think in semantic CSS, may want a different default. For cultural and marketing Astro sites with a clear visual direction, Tailwind plus components is still a strong combo — if you treat utilities as an implementation detail, not the architecture.