Tailwind
The compiler behind the class names
Utility classes are not a vocabulary to memorise. They are input to a build step that writes your stylesheet for you — so you will generate one from your own markup and read it: why one class beat another, what a prefix turned into, which selector a variant made, and why the class you wrote is not in the file.
- Modules
- 5
- Drills
- 10
- Build steps
- 2
- Time
- ~4h
Walk out able to
Take any class attribute and say what it compiles to, which declaration wins, and whether the build will emit it at all.
Enough to debug any version, not this one.What you will be able to read
Why one utility wins
Sheet order, and the layer it all lands in.
Prefixes and variants
The media query and the selector each one becomes.
The theme as an API
Namespaces, and what each one brings into existence.
What the build can see
Only whole class names reach the stylesheet.
The pitch
What you practise, and what you leave with
A tone-button whose every possible class exists in the source — proved by deleting the stylesheet, rebuilding, and breaking one tone.
You will practise
- Which of two conflicting utilities supplies it
- What a breakpoint prefix compiles to
- The selector a variant chain produces
- What the extractor finds in your source
Afterwards you can
- Say why a utility won without guessing
- Turn any prefix into its media condition
- Read a compiled selector back to its variants
- Design a component the build can actually see
Modules
5 modules, 25 items
Lessons explain one idea. Drills repeat it until it sticks. Build steps make something that exists afterwards.
- 1
Read a class as a rule
~1hGenerate a stylesheet from your own markup, and say which of its rules wins.
- LessonWhy there is a build at all4 min
- Build stepBuild the sheet and read it18 min
- LessonWhy a utility class wins9 min
- LessonWhere the whole sheet sits8 min
- DrillSettle a conflict between utilities10 min
- DrillPlace the sheet in the cascade11 min
- 2
Prefixes are media queries
~36 minSay which prefixed utility is in effect at a width, and which widths one covers.
- LessonWhat a breakpoint prefix compiles to8 min
- LessonCeilings, bands, and the sort9 min
- DrillSay which value applies at a width10 min
- DrillName the band a variant covers9 min
- 3
A variant is a transform
~38 minRead a compiled selector back to the variant chain, and say which element it reaches.
- LessonRead a compiled selector back8 min
- LessonWhen the rule is about another element9 min
- DrillMatch a variant to its selector11 min
- DrillDecide whether the marker reaches it10 min
- 4
Name it in the theme
~48 minAdd values to the theme and predict the utilities and variants they create.
- LessonConfigure by naming things8 min
- LessonVariants, brackets and names8 min
- DrillPick the namespace that makes it9 min
- DrillRead an arbitrary value9 min
- Build stepName a breakpoint and a colour14 min
- 5
Only what the build can see
~1hPredict what the extractor finds, and ship a component whose variants survive a rebuild.
- LessonWatch the build read plain text8 min
- LessonWhere it looks, and the real fix9 min
- DrillAudit a file for what ships12 min
- DrillSpell a class name the build sees8 min
- LessonBuild the tone-button16 min
- LessonProve it, then break it12 min
More in Web & frontend
Keep going
Modern CSS
Six features that changed what a stylesheet is.
Intermediate~4h6 modules
CSS: Layout
Predict the box before the browser draws it.
Intermediate~3h6 modules
CSS: Cascade & Specificity
Specificity is the fifth question, not the first.
Intermediate~4h5 modules
HTML & Semantics
Two documents that look identical. Only one of them says anything.
Foundational~4h6 modules
A class name is a compiled selector.
The first item is free. ~4h of focused work, at your own pace.
Intermediate~4h5 modules