# Tailwindcss Utility Classes

> 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 - go to the category skill.

- Skill: `fusengine/tailwindcss-utility-classes` (Agent Skill)
- Install (CLI): `npx skillmds@latest add fusengine/tailwindcss-utility-classes`
- Raw SKILL.md: https://api.skillmd.com/api/skills/fusengine/tailwindcss-utility-classes/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools, Design & Media
- Author: fusengine (https://skillmd.com/u/fusengine)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/fusengine/tailwindcss-utility-classes

---


<objective>
A routing index over Tailwind CSS utility-class categories — layout, spacing, typography, colors, borders, effects, state variants — mapping each category to its dedicated `tailwindcss-*` skill (layout/spacing/typography/backgrounds/borders/effects/interactivity) and, where useful, a specific section within it.

Routing only: contains no worked examples or concrete class lookups itself; load the linked category skill directly once the category is known.
</objective>

# 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).