theme

@uswds-tailwind/theme

A Tailwind CSS v4 theme that exposes USWDS design tokens (colors, spacing, typography, breakpoints) as @theme variables.

Note

This package is in alpha. APIs may change between releases.

Install

npm install -D @uswds-tailwind/theme@alpha tailwindcss

Usage

Import the theme alongside Tailwind in your global CSS:

@import 'tailwindcss';
@import '@uswds-tailwind/theme';

If you're using @uswds-tailwind/react, you don't need to import this package directly. The React stylesheet already pulls it in.

What's included

• USWDS color, spacing, and typography tokens as Tailwind v4 @theme variables
• @tailwindcss/forms and @tailwindcss/typography presets
• tailwindcss-animate utilities

USWDS-recommended fonts (Public Sans, Source Sans 3, Merriweather, Roboto Mono, Open Sans) and icon sets (material-symbols, Font Awesome via @iconify/tailwind4) are declared as optionalDependencies. Install only what you use.

License

MIT