Design System Docs
Home Architecture Getting Started Packages Playground
Home Architecture Getting Started Packages Playground
Components Styles Elements Feeds Tokens Icons Utilities Model & Builder

Tailwind Integration

Integrate the UMD Design System with Tailwind CSS
Home Styles

Tailwind Integration

Where This Package Fits: Styles sits in the Infrastructure layer. It depends on Tokens and is used by Elements, Components, and your custom CSS. See full architecture.

Not using Tailwind? See the Static CSS Guide for a simpler approach using pre-compiled CSS files.

About This Integration

The UMD Styles Library can be seamlessly integrated with Tailwind CSS to provide a comprehensive styling solution. This integration allows you to use UMD's design tokens, utilities, and components within your Tailwind workflow.

Tailwind CSS v4 (Recommended)

Tailwind 4 introduces a CSS-first configuration approach. The UMD Design System provides a pre-built CSS file that integrates all UMD tokens directly with Tailwind 4's @theme directive.

Quick Start

Just import the UMD Tailwind CSS file in your main stylesheet:

/* main.css */
@import '@universityofmaryland/web-styles-library/tailwind.css';

/* Your custom styles */

That's it! You now have access to all UMD design tokens as Tailwind utilities.

What You Get

UMD Colors
  • text-red, bg-red, border-red
  • text-gold, bg-gold
  • text-gray-darker, bg-gray-light
  • text-red-dark, bg-blue
UMD Spacing
  • p-md, m-lg, gap-xl
  • p-2xl, m-3xl, gap-4xl
  • p-min, p-xs, p-sm
  • p-max, m-8xl
UMD Typography
  • font-sans, font-serif, font-campaign
  • text-lg, text-3xl, text-5xl
  • font-bold, font-semi-bold
UMD Breakpoints
  • tablet:bg-red (768px+)
  • desktop:text-lg (1024px+)
  • high-def:p-xl (1200px+)

CSS Variables

All tokens are also available as CSS custom properties:

.my-element {
  color: var(--color-red);
  padding: var(--spacing-md);
  font-family: var(--font-sans);
  font-size: var(--font-size-lg);
}

Theme-Only Option

If you don't need Tailwind utilities, import just the theme variables:

/* For projects not using Tailwind */
@import '@universityofmaryland/web-styles-library/tailwind-theme.css';

What This Configuration Does

Design Tokens
  • Colors: UMD brand colors (red, gold, black)
  • Typography: Font families, sizes, and weights
  • Spacing: Consistent spacing scale
  • Breakpoints: Mobile, tablet, and desktop
Utilities & Components
  • Layout utilities: Grid systems and spacing
  • Text utilities: Typography helpers
  • Component styles: Pre-built component classes
  • Responsive helpers: Breakpoint-based utilities

Usage Examples

Using UMD Colors

With the configuration above, you can use UMD colors as Tailwind utilities: 

<!-- UMD Red background -->
<div class="bg-red text-white p-4">
  UMD Red Background
</div>

<!-- UMD Gold text -->
<h2 class="text-gold">Gold Heading</h2>

<!-- UMD Black border -->
<div class="border-2 border-black p-4">
  Black Border
</div>

Using UMD Spacing & Layout

The integration provides UMD-specific spacing and layout utilities: 

<!-- UMD Layout spacing utilities -->
<div class="umd-layout-space-vertical-landing">
  <h1>Landing Page Section</h1>
</div>

<!-- UMD Grid system -->
<div class="umd-grid-gap-three">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</div>

<!-- Combined with Tailwind utilities -->
<div class="umd-layout-space-horizontal-normal mx-auto max-w-screen-xl">
  <p class="text-lg md:text-xl">Responsive content</p>
</div>

Typography with UMD Fonts

Use UMD's typography system within Tailwind:

<!-- UMD Sans font utilities -->
<h1 class="umd-sans-largest-uppercase">
  Page Title
</h1>

<!-- Rich text content -->
<div class="umd-text-rich-simple-large">
  <p>Enhanced paragraph text with proper spacing and sizing.</p>
</div>

<!-- Combine with Tailwind's text utilities -->
<p class="font-sans text-base leading-relaxed text-gray-700">
  Standard body text
</p>

Advanced Usage

Custom Plugin Extension

You can extend the plugin to add your own custom utilities while maintaining UMD standards: 

import * as Styles from '@universityofmaryland/web-styles-library';
import plugin from 'tailwindcss/plugin';

const customPlugin = plugin(function ({ addUtilities, theme }) {
  const newUtilities = {
    '.umd-custom-gradient': {
      background: `linear-gradient(135deg, ${theme('colors.red')} 0%, ${theme('colors.gold')} 100%)`,
    },
    '.umd-custom-shadow': {
      boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
    },
  };

  addUtilities(newUtilities);
});

// Add to your plugins array
const plugins = [
  // ... existing UMD plugin
  customPlugin,
];

Responsive Design Patterns

Use UMD's breakpoints for responsive design:

<!-- UMD breakpoints: mobile (0-767px), tablet (768-1023px), desktop (1024px+) -->
<div class="p-4 md:p-6 lg:p-8">
  <h2 class="text-xl md:text-2xl lg:text-3xl">
    Responsive Heading
  </h2>

  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <!-- Grid items -->
  </div>
</div>

Best Practices
Do's
  • Use UMD color tokens for brand consistency
  • Leverage UMD spacing utilities for consistent layouts
  • Combine UMD utilities with Tailwind's responsive modifiers
  • Use the provided breakpoints for responsive design
Don'ts
  • Don't override UMD brand colors
  • Don't mix different spacing systems (stick to UMD's scale)
  • Don't ignore accessibility when using color utilities
  • Don't forget to test across all breakpoints

Related Resources

Styles API Reference

Complete API documentation for all styles exports.

View API

Static CSS Guide

Pre-compiled CSS files for projects that don't use Tailwind.

View Guide

Styles Use Cases

Common patterns for applying design system styles.

View Use Cases

Developer Tools

Learning

UMD Links