home / skills / fusengine / agents / tailwindcss-typography

tailwindcss-typography skill

safe

/plugins/tailwindcss/skills/tailwindcss-typography

This skill helps you apply and customize Tailwind CSS Typography utilities to control font, text, and decoration across projects.

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

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

Files (4)

SKILL.md

1.0 KB

---
name: tailwindcss-typography
description: "Typography utilities Tailwind CSS v4.1. Font (font-sans, font-serif, font-mono, font-size, font-weight), Text (text-color, text-align, text-wrap, text-shadow NEW), Letter/Line spacing, Decoration, Transform."
user-invocable: false
---

# Tailwind CSS Typography v4.1

Typography utilities for controlling font families, sizes, weights, text styling, spacing, and decoration in Tailwind CSS v4.1.

## Core Features

- **Font Family**: font-sans, font-serif, font-mono
- **Font Size**: text-xs to text-9xl with scaling
- **Font Weight**: thin, extralight, light, normal, medium, semibold, bold, extrabold, black
- **Text Color**: Full color palette support
- **Text Alignment**: left, center, right, justify
- **Text Wrapping**: wrap, nowrap, balance, pretty (NEW in v4.1)
- **Text Shadow**: New utility for text-shadow effects
- **Letter Spacing**: tracking values
- **Line Height**: leading values
- **Text Decoration**: decoration styles and colors
- **Text Transform**: uppercase, lowercase, capitalize, normal-case

Overview

This skill packages a comprehensive set of typography utilities for Tailwind CSS v4.1, focused on font families, sizing, weights, color, spacing, and decoration. It adds modern text controls including new text-wrap modes and a text-shadow utility to simplify expressive typographic styling. The utilities map directly to intuitive class names for fast, consistent styling across projects.

How this skill works

The skill exposes Tailwind-compatible utility classes for font family (font-sans, font-serif, font-mono), a scaled font-size range (text-xs to text-9xl), and full weight options. It supports the full Tailwind color palette for text, text alignment, line-height, letter-spacing, decoration options, and text transforms. New v4.1 features include advanced text-wrap modes (balance, pretty) and a text-shadow utility to create layered typographic effects. Developers apply these classes in markup to get predictable, responsive typography without custom CSS.

When to use it

When you need consistent, responsive font sizing and weight options across a project.
To apply expressive text treatments like shadows, advanced wrapping, or balanced line breaks.
When standard Tailwind typography needs extension with new utilities (wrap modes, text-shadow).
For rapid prototyping where semantic utility classes speed development and enforce design rules.

Best practices

Use semantic combinations (size + weight + line-height) to maintain readable hierarchies.
Prefer the new balance and pretty wrap modes for long-form copy to improve legibility.
Limit heavy text-shadow use to headings or accents to avoid readability loss on body text.
Pair font-family utilities with appropriate letter-spacing and leading for consistent rhythm.
Leverage the color palette classes rather than inline styles to keep themes maintainable.

Example use cases

Create a scalable heading system using text-4xl to text-9xl with corresponding font weights.
Style a blog post body with font-serif, balanced wrapping, leading-relaxed, and text-gray-700.
Add subtle depth to hero titles using the new text-shadow utility and semibold weight.
Build a compact UI using font-mono for code blocks and tracking-tight for inline snippets.

FAQ

Does this include responsive variants?

Yes. All utilities are compatible with Tailwind's responsive prefixes (sm:, md:, lg:, etc.).

How do the new wrap modes differ?

Balance improves line-length distribution for multi-line text; pretty applies aesthetic breaks for headings and constrained widths.

Is text-shadow customizable?

The text-shadow utility provides base presets; you can extend or customize values in your Tailwind config.