CSS

Tailwind v4 cheat sheet

Tailwind CSS v4 moves configuration into CSS. This sheet covers the at-rules that replace tailwind.config.js, plus the utilities and variants that changed in v4.

Setup

Utilities

Variants

Things worth remembering

There is no tailwind.config.js in v4. Tokens live in @theme inside your entry CSS file.
A token named --color-brand automatically generates bg-brand, text-brand and border-brand.
@apply outside the entry stylesheet needs @reference "../styles.css" first.

More CSS sheets

FlexboxOne-dimensional layout along a main axis.CSS GridTwo-dimensional layout with rows and columns.CSS selectorsCombinators, pseudo-classes and modern selector syntax.