Videos / Web Dev

Episode 13 of 16 · Web development, end to end

Tailwind: utility classes, and the design system underneath

Chapters

1. The name you invent0:00
2. One class, one declaration0:15
3. The styles move to the markup0:32
4. Yes, it looks like inline style0:48
5. Nothing to out-specify1:05
6. The honest cost1:22
7. The short shelf1:40
8. Spacing is one unit, times n1:57
9. Type carries its line height2:12
10. A family and a number2:31
11. The theme is C S S now2:47
12. The square bracket hole3:07
13. Nothing is pre-written3:24
14. It reads your files as text3:42
15. The name must be whole3:59
16. Map it, do not build it4:16
17. What actually ships4:33
18. Dead C S S cannot pile up4:52
19. A colon is a condition5:10
20. And that answers chapter one5:28
21. Mobile first, upward5:46
22. Variants stack6:04
23. State without JavaScript6:22
24. Behaviour, legible at the element6:40
25. The class list got long6:56
26. Wrong way one: at-apply7:14
27. Wrong way two: your own framework7:33
28. Extract the thing, not the styles7:51
29. Variants as data8:11
30. When to extract8:29
31. Dials, not a copy8:48
32. Tokens are real variables9:04
33. The dark variant9:23
34. Name the role, not the colour9:41
35. Where plain C S S still wins10:01
36. Prose is the honest edge10:20
37. The whole argument10:38

Tailwind: utility classes, and the design system underneath. Before you write a single style, C S S asks you for a name. What do you call this? Card header title. Nav item active. You are inventing a private vocabulary that nobody else knows

Mark as watchedSaved in this browser only.