playbooks

home / skills / fusengine / agents / tailwindcss-utilities

tailwindcss-utilities skill

/plugins/tailwindcss/skills/tailwindcss-utilities

This skill provides a complete reference for Tailwind CSS utility classes, helping you apply styling efficiently across layouts, spacing, typography, colors,

npx playbooks add skill fusengine/agents --skill tailwindcss-utilities

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
1.2 KB
---
name: tailwindcss-utilities
description: Complete reference for Tailwind CSS utility classes
user-invocable: false
---

# Tailwind CSS Utilities Reference

## Layout
- [flex.md](../docs/flex.md), [grid-column.md](../docs/grid-column.md)
- [position.md](../docs/position.md), [display.md](../docs/display.md)

## Spacing
- [padding.md](../docs/padding.md), [margin.md](../docs/margin.md)
- [width.md](../docs/width.md), [height.md](../docs/height.md)

## Typography
- [font-size.md](../docs/font-size.md), [font-weight.md](../docs/font-weight.md)
- [text-align.md](../docs/text-align.md), [line-height.md](../docs/line-height.md)

## Colors & Effects
- [colors.md](../docs/colors.md), [background-color.md](../docs/background-color.md)
- [box-shadow.md](../docs/box-shadow.md), [opacity.md](../docs/opacity.md)

## Borders
- [border-width.md](../docs/border-width.md), [border-radius.md](../docs/border-radius.md)
- [outline.md](../docs/outline-width.md)

## Transforms
- [transform.md](../docs/transform.md), [translate.md](../docs/translate.md)
- [rotate.md](../docs/rotate.md), [scale.md](../docs/scale.md)

## Transitions
- [transition-property.md](../docs/transition-property.md)
- [animation.md](../docs/animation.md)

Overview

This skill is a complete reference for Tailwind CSS utility classes, organized by common categories like layout, spacing, typography, colors, borders, transforms, and transitions. It helps developers quickly find the exact utility class they need and understand its purpose and usage. The content is concise, practical, and geared toward speeding up UI implementation and maintenance.

How this skill works

The skill inspects and catalogs Tailwind utilities by category and purpose, presenting concise descriptions and examples for each class family. It maps utilities to common UI tasks—e.g., flex/grid layout, padding/margin, font sizing, colors, shadows, transforms, and animations—so you can locate variants and responsive or state modifiers fast. It serves as a quick lookup and decision aid while coding or reviewing styles.

When to use it

  • When you need a fast lookup for a specific Tailwind utility class or variant.
  • When designing responsive layouts and you want the right flex/grid or width/height utilities.
  • When adjusting typography, spacing, color, or visual effects consistently across components.
  • When implementing transitions, transforms, or animations and you need the correct utility names and options.
  • When onboarding developers who need a compact, authoritative reference for Tailwind patterns.

Best practices

  • Prefer utility composition over bespoke CSS to keep styles predictable and portable.
  • Use semantic component classes alongside utilities for complex components to improve maintainability.
  • Leverage responsive and state variants (sm:, md:, hover:, focus:) systematically for consistent behavior.
  • Favor small, atomic utilities for layout and spacing to make visual adjustments easy and reversible.
  • Reference the specific utility family (layout, spacing, typography, etc.) to avoid mixing responsibilities in a single element.

Example use cases

  • Find the correct flex, grid-column, or display utility to build responsive layouts quickly.
  • Choose padding, margin, width, or height classes to align elements without custom CSS.
  • Select font-size, font-weight, text-align, and line-height utilities for consistent typography across pages.
  • Pick color, background-color, opacity, and box-shadow utilities to tune visual hierarchy and accessibility.
  • Apply transform, translate, rotate, scale, transition, and animation utilities to add micro-interactions and motion.

FAQ

Does this reference include responsive and state variants?

Yes. It covers the common responsive (sm:, md:, lg:, xl:) and state modifiers (hover:, focus:, active:) alongside base utilities.

Is this a full replacement for the official documentation?

This skill is a practical, organized reference designed for quick lookup and usage scenarios; consult the official Tailwind docs for edge cases, configuration, and plugin-specific behaviors.