Tailwind Setup

Configure Tailwind CSS v4 alongside the Mordecai Design System.

Overview

Mordecai is built on Tailwind CSS v4. When consuming the design system in your own application, you can extend its theme or use Tailwind utilities alongside the provided components.

Install Tailwind CSS v4

Install Tailwind CSS v4 and its Vite/PostCSS plugin for your project.

pnpm add tailwindcss @tailwindcss/vite

Import the design system styles

Import the design system styles before your own Tailwind entry point to ensure correct cascade ordering.

/* app/globals.css */
@import '@corew500/ui/styles.css';
@import 'tailwindcss';

Using the Tailwind Preset

Import the Mordecai Tailwind preset to get access to all design tokens as Tailwind utilities in your own stylesheets.

/* tailwind.config.ts */
import type { Config } from 'tailwindcss'
import mordecaiPreset from '@corew500/ui/tailwind-preset'

export default {
  presets: [mordecaiPreset],
  content: ['./src/**/*.{ts,tsx}'],
} satisfies Config

Design Token Classes

All design tokens are available as Tailwind utility classes. Use semantic color tokens for brand-consistent styling.

Available semantic color utilities

bg-primary — Primary brand background

text-foreground — Default text color

border-border — Default border color

bg-muted — Subdued background

text-muted-foreground — Subdued text