mcpField
T
tailwindcss-typography

tailwindcss-typography

github.com/fusengineDesign & UI3455 installsUpdated 2w ago
Repository

About tailwindcss-typography

A reference skill for Tailwind CSS v4.3 typography utilities, intended for developers styling text in Tailwind projects. It organizes controls for fonts, spacing, wrapping, and decoration, including version-specific utilities.

Key features

  1. 01Font families, sizes, and weights
  2. 02Text color and alignment
  3. 03Wrapping and text shadows
  4. 04Tab size and font features
  5. 05Letter spacing and line height
  6. 06Decoration and text transforms

Use cases

  1. 01Choosing typography utilities for a Tailwind interface
  2. 02Tuning wrapping and spacing for text
  3. 03Applying text decoration and casing styles

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/fusengine/claude-plugins --skill tailwindcss-typography

After installing, type/tailwindcss-typographyin Claude Code to confirm it loaded.

Details

From the project README
Complete reference for Tailwind CSS v4.3 typography utilities: font family (`font-sans`/`font-serif`/`font-mono`), font size and weight, `font-features-*` (since v4.2), text color/alignment, text wrapping including the `balance`/`pretty` values (since v3.4), the `text-shadow` utility (since v4.1), `tab-*` tab size (since v4.3), letter spacing (`tracking-*`), line height (`leading-*`), text decoration, and text transform (`uppercase`/`lowercase`/`capitalize`).

Tailwind CSS Typography v4.3

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

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
  • Font Features: font-features-[…] for font-feature-settings (since v4.2)
  • Text Wrapping: wrap, nowrap, balance, pretty (since v3.4)
  • Text Shadow: text-shadow effects (since v4.1)
  • Tab Size: tab-<number> for tab-size (since v4.3)
  • Letter Spacing: tracking values
  • Line Height: leading values
  • Text Decoration: decoration styles and colors
  • Text Transform: uppercase, lowercase, capitalize, normal-case

Detailed References

  • fonts.md - Load when picking font-family/size/weight values, italics, numeric variants, font-feature-settings, or font smoothing
  • text.md - Load when styling text color, alignment, wrapping (balance/pretty), text-shadow, decoration, transform, whitespace, or tab size
  • spacing.md - Load when tuning letter-spacing (tracking) or line-height (leading)

Comments

Markdown supported