tailwind
Applies semantic tokens and layout rules in Tailwind.
- Status
- Observed
- Last reviewed
- 2026-10-10
ID: tailwind.
What it does
Reads the skill rules and local project overrides. Expresses styles through className, reuses tokens for text, surfaces and states, and assigns spacing to the container with grid or flex and gap. Checks fluid layouts, breakpoints and source file discovery when shared folders or symlinks exist. Missing tokens are added to the repository styling system.
When to use it
Use it for Tailwind styling, responsive fixes and spacing or token cleanup. Preserves project conventions; it does not introduce a second CSS system for a local change.
How to use it
Ask for it by name, or invoke it with /tailwind in Claude Code or $tailwind in Codex. Specify components and the layout defect, plus viewports and states to support. Have local overrides read if present. Request container-controlled spacing and role tokens, verifying that the result flows with real text.
What it delivers
- Classes and tokens consistent with the repository
- Responsive layout and container spacing
- Applied local rules and relevant checks
Example
Fix the toolbar in Tailwind: container spacing, semantic tokens and wrapping on mobile, without inline styles.