CatalystStyling
Learn how to configure TailwindCSS, apply custom styles, and leverage the Catalyst design system in your application.
Design Resources
Access the official Catalyst 2.0 design files to understand the visual language, components, and design tokens:
Prerequisites
Before configuring styles for Catalyst 2.0, ensure you have:
- TailwindCSS: Version 3.0 or higher (v4 supported)
- PostCSS: Required for processing Tailwind directives
- Catalyst Theme Package:
@pmi/catalyst-theme(recommended)
TailwindCSS Configuration
Catalyst components are styled using TailwindCSS utility classes. Since distribution files do not include pre-compiled CSS, you must configure Tailwind to scan Catalyst package files in node_modules.
For automatic design token integration, use the official Catalyst theme preset:
/** @type {import('tailwindcss').Config} */
import type { Config } from 'tailwindcss';
import { tailwindThemePreset } from '@pmi/catalyst-theme';
export default {
presets: [tailwindThemePreset],
content: ['./src/**/*.{ts,tsx,js,jsx}', './node_modules/@pmi/catalyst-*/**/*.{ts,tsx,js,jsx,mjs}'],
} satisfies Config;