tailwind-core-design-system
Installation
SKILL.md
Tailwind CSS Core: Design System
The design system is the single source of truth for every value Tailwind utilities produce. Spacing, colors, type, breakpoints, radii, shadows: all of them are tokens, and the markup expresses intent within that token system. Mastering the design system is the difference between writing fluent Tailwind and fighting it.
Quick Reference
Default tokens at a glance
| Domain : default scale : v4 namespace : v3 location |
|---|
Spacing : 0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96 (in 0.25rem steps) : --spacing (single base unit, 0.25rem) : theme.spacing.* |
Color : 22 families (5 grays + 17 chromatic), 11 shades each (50, 100, ..., 950) : --color-{family}-{shade} (oklch) : theme.colors.* (rgb/hsl/hex) |
Type : text-xs, text-sm, text-base, text-lg, text-xl, text-2xl ... text-9xl : --text-* (+ --text-*--line-height pairing) : theme.fontSize.* |
Breakpoints : sm 640, md 768, lg 1024, xl 1280, 2xl 1536 (px) : --breakpoint-* : theme.screens.* |
Opacity : 0, 5, 10, ..., 95, 100 (5% steps) plus arbitrary : modifier /N or /[N%] : modifier /N or /[N%] |