In the Skill's Own Terms
Guides the implementation of design systems on Tailwind CSS v4; generated code still needs integration and testing in the target project. It walks through CSS-first configuration, where @theme in app.css replaces tailwind.config.ts, semantic color tokens written in OKLCH, radius and animation tokens whose keyframes sit inside @theme, class-based dark mode declared with @custom-variant, and base styles applied in @layer base.
It also sets out the token hierarchy from brand to semantic to component tokens, a component architecture running base styles, variants, sizes, states and overrides, plus responsive and accessible component patterns. Written for teams creating a component library, standardizing UI patterns across a codebase, or migrating from Tailwind v3.
What it produces
- CSS-first theme tokens for color, typography, radius and animation
- Component patterns organized by base styles, variants, sizes and states
How It Works
- 01Import Tailwind in the CSS Entry Point
app.css starts with a single @import rather than the v3 @tailwind base/components/utilities directives.
- 02Declare the Semantic Token Set Under @theme
Background, foreground, primary, secondary, muted, accent, destructive, border, ring and card are all declared as color tokens in OKLCH.
- 03Add Animation Tokens with Their Keyframes
--animate-fade-in and --animate-fade-out run at 0.2s, --animate-slide-in and --animate-slide-out at 0.3s, each with a matching @keyframes block declared inside @theme.
- 04Override the Same Token Names Under .dark
The dark block reassigns every token rather than introducing new names, mirroring background, foreground, primary, secondary, muted, accent, destructive, border, ring, card and ring-offset.
- 05Set Base Layer Defaults
@layer base applies border-border to every element and gives body the themed background, foreground color and antialiasing.
- 06Build Components in Layer Order
Components move through base styles, variants, sizes, states and overrides in that sequence.