Mobile first
Classes with no prefix are for phones; prefixes like md: take over on bigger screens
Words that go with it
- @themeThe block in globals.css where Tailwind v4 design tokens are defined
- Arbitrary valueA class with square brackets, like max-w-[68ch], for an exact value
- BreakpointThe screen width where a prefix starts: sm 640, md 768, lg 1024, xl 1280
- Design tokenA named value your whole site uses, like --color-accent
- FlexLining children up in a row or column
- GridArranging children in columns
- MarginSpace outside an element, pushing others away (m, mt, mx-auto)
- PaddingSpace inside an element, between its edge and its content (p, px, py)
- Spacing scaleTailwind's spacing steps: each step is 4 pixels
- State prefixhover:, focus-visible:: a class that applies only in that situation
- Tailwind CSSA styling system where short class names go straight onto elements
- Utility classOne tiny ready-made style, like mt-4 or font-bold