About tailwindcss-utilities
tailwindcss-utilities is an index for locating Tailwind CSS utility guidance by category. It maps utility families to the relevant `tailwindcss-*` skill and section rather than reproducing class instructions.
Key features
- 01Routes layout utilities to skills
- 02Maps spacing and sizing categories
- 03Indexes typography utilities
- 04Links color and effect categories
- 05Points to border and transform guides
Use cases
- 01Finding guidance for a Tailwind utility family
- 02Navigating to category-specific worked examples
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/tailwindcss-utilitiesin Claude Code to confirm it loaded.
Details
From the project README
A routing index over the categorical Tailwind CSS skills — layout, spacing, typography, backgrounds, effects, borders, transforms — mapping utility-class families (flexbox/grid, padding/margin, font/text, colors, shadows, borders, transforms/transitions) to the specific `tailwindcss-*` skill and section that documents them.
Contains no utility-class content itself; every entry links straight to the category skill that owns the worked examples.
Tailwind CSS Utilities Reference
Layout
- Flexbox, Grid, Position, Display -> tailwindcss-layout
Spacing
- Padding -> tailwindcss-spacing
- Margin -> tailwindcss-spacing
- Width -> tailwindcss-sizing
- Height -> tailwindcss-sizing
Typography
- Font size, font weight, text align, line height -> tailwindcss-typography
Colors & Effects
- Color palette, background color -> tailwindcss-backgrounds
- Box shadow -> tailwindcss-effects
- Opacity -> tailwindcss-effects
Borders
- Border width, border radius, outline -> tailwindcss-borders
Transforms
- Transform, translate, rotate, scale -> tailwindcss-transforms
Transitions
- Transition property, animation -> tailwindcss-transforms
Comments
Markdown supported