UGRC Tailwind CSS Preset

This Tailwind CSS v4 preset defines colors and font families used in UGRC products and required by the Utah Design System. These primary colors and fonts are used throughout the @ugrc/utah-design-system components and atlas layout.

Usage

pnpm add -D @ugrc/tailwind-preset

/* app.css */
@import 'tailwindcss';
@import '@ugrc/tailwind-preset';

Colors

This preset extends the default tailwindcss color pallet with primary, secondary, and accent colors ranging from 50-950.

The primary colors are generated from the deep purple in our logo #4d2a54 and is primary-900.

The secondary colors are generated from the deep blue in our logo #33505d and is secondary-800.

The accent colors are generated from the light yellow in our logo #eaca00 and is accent-500.

The warning colors default to the standard tailwind rose color pallette and are used for required inputs, warning, and error components.