Skip to main content
Frontend Developmentfusengine

tailwindcss-utility-classes

Complete Tailwind CSS utility classes reference - Layout, spacing, typography, colors, borders, effects

Stars
13
Source
fusengine/agents
Updated
2026-05-17
Slug
fusengine--agents--tailwindcss-utility-classes
View on GitHubRaw SKILL.md

// install — copy + paste into any project

mkdir -p .claude/skills && curl -fsSL https://raw.githubusercontent.com/fusengine/agents/HEAD/plugins/tailwindcss/skills/tailwindcss-utility-classes/SKILL.md -o .claude/skills/tailwindcss-utility-classes.md

Drops the SKILL.md into .claude/skills/tailwindcss-utility-classes.md. Works with Claude Code, Cursor, and any agent that loads SKILL.md files from .claude/skills/.

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 display, flexbox, grid, position, container queries
Spacing tailwindcss-spacing margin, padding, space-between
Typography tailwindcss-typography font family/size/weight, text color/align/wrap, letter/line spacing, decoration
Backgrounds/Colors tailwindcss-backgrounds background colors, gradients, images, blend modes
Borders tailwindcss-borders border width/color/style/radius, outline, ring, divide
Effects tailwindcss-effects shadows, opacity, filters, backdrop filters, masks
State variants tailwindcss-interactivity hover/focus/active/disabled pseudo-class variants, cursor, scroll, pointer-events

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