Tailwind CSS Development
House style first
Read the components around the one you are touching before you add a class. Match what they already do — their spacing rhythm, their color tokens, their breakpoints, their component boundaries. The house style outranks any default you would otherwise reach for.
Dark mode is the part most often missed: if the surrounding pages carry
variants, every new element carries them too.
Stay on the scale
Every value comes from Tailwind's default spacing, size, and color scale. When the scale genuinely lacks a value, extend the scale — add a token in
— and use the token.
Two escape hatches lead off the scale, and both stay shut:
- Arbitrary values — the square-bracket form (, , ). Use the scale or an token instead.
- Hand-written CSS — custom class names and CSS rules (, ). Reuse comes from extracting a component (Blade, Vue, JSX) instead.
Utilities
Use
for space between siblings; reach for margin only to push an element away from something that is not its sibling.
Keep the class list minimal: drop classes that restate what a parent already sets, and hoist a class to the parent when every child repeats it.
v4, not v3
The config is CSS-first. There is no
and no
; theme values live in
:
css
@theme {
--color-brand: oklch(0.72 0.11 178);
}
Tailwind is imported as plain CSS —
— in place of the v3
@tailwind base/components/utilities
directives.
These v3 utilities were removed. Opacity is now a slash modifier:
Before you finish
Re-read every class you wrote or changed. Each one is a v4 utility, on the scale, and consistent with the house style around it. Fix the ones that are not before you report done.