---
name: tailwindcss-utility-classes
description: "Index of Tailwind CSS utility-class categories (layout, spacing, typography, colors, borders, effects, state variants). Use when: unsure which category skill covers a given utility class and need routing to the right one. Do NOT use for: concrete class lookup or worked examples — go directly to the category skill (tailwindcss-layout/spacing/typography/backgrounds/borders/effects/interactivity), this file only routes."
user-invocable: false
---

# Tailwind CSS Utility Classes — Index

Routing index only. Each category has its own skill with full worked examples — load that skill directly instead of this one when the category is known.

| Category | Skill | Covers |
|----------|-------|--------|
| Layout | [tailwindcss-layout](../tailwindcss-layout/SKILL.md) | display, flexbox, grid, position, container queries |
| Spacing | [tailwindcss-spacing](../tailwindcss-spacing/SKILL.md) | margin, padding, space-between |
| Typography | [tailwindcss-typography](../tailwindcss-typography/SKILL.md) | font family/size/weight, text color/align/wrap, letter/line spacing, decoration |
| Backgrounds/Colors | [tailwindcss-backgrounds](../tailwindcss-backgrounds/SKILL.md) | background colors, gradients, images, blend modes |
| Borders | [tailwindcss-borders](../tailwindcss-borders/SKILL.md) | border width/color/style/radius, outline, ring, divide |
| Effects | [tailwindcss-effects](../tailwindcss-effects/SKILL.md) | shadows, opacity, filters, backdrop filters, masks |
| State variants | [tailwindcss-interactivity](../tailwindcss-interactivity/SKILL.md#pseudo-class-state-variants) | hover/focus/active/disabled pseudo-class variants, cursor, scroll, pointer-events |

Border colors specifically live in [tailwindcss-borders/references/border.md](../tailwindcss-borders/references/border.md); text colors in [tailwindcss-typography/references/text.md](../tailwindcss-typography/references/text.md).