Tailwind Integration

🎨 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.

Overview

The @universityofmaryland/web-styles-library package exports design tokens and utilities that can be integrated directly into your Tailwind configuration. This provides:

Consistent UMD colors, typography, and spacing
Pre-built utility classes for layouts and grids
Responsive breakpoints aligned with UMD standards
Component styles compatible with Tailwind's plugin system

Getting Started

📚 Prerequisites

Before integrating with the UMD Design System, ensure you're familiar with:

Tailwind CSS Documentation - Understanding Tailwind's utility-first approach
Tailwind Configuration - How to customize Tailwind's theme
Tailwind Plugins - Extending Tailwind with custom utilities

📦 Installation

Install the UMD Styles Library from NPM:

npm install @universityofmaryland/web-styles-library

# Or with yarn
yarn add @universityofmaryland/web-styles-library

View the package on NPM: @universityofmaryland/web-styles-library

Tailwind Configuration

🔧 Basic Configuration

Create or update your tailwind.config.js file with the following configuration:

/** @type {import('tailwindcss').Config} */

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

const content = ['./source/**/*.{css,twig}'];

const { token, root: utilities, outputStyles: components } = Styles;
const { color, font, media } = token;
const base = {
  ...token,
  fontFamily: font.family,
  fontSize: font.size,
  fontWeight: font.weight,
  breakpoints: media.breakpoints,
};

const tailwindBase = Object.fromEntries(
  Object.entries(base).map(([key, value]) => [
    key.charAt(0).toLocaleLowerCase() + key.slice(1),
    value,
  ]),
);

const theme = {
  screens: media.breakpoints,
  queries: media.breakpoints,
  colors: color,
  ...tailwindBase,
};

const plugins = [
  plugin(function ({ addUtilities, addComponents }) {
    addUtilities(utilities);
    addComponents(components);
  }),
];

export { content, theme, plugins };

🎯 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-larger 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>