tailwind-config

Tailwind configuration centralizes design tokens by extending the base config with custom colors, typography, spacing, and theme definitions. Create a shared base tailwind.config.ts file, then extend it in app-specific configs to apply consistent tokens across UI, web, and admin packages in your monorepo.

Yes. Define a shared base configuration with core design tokens, then create app-specific tailwind.config.ts files that extend it. This approach maintains consistency while allowing individual packages to add their own theme extensions and custom tokens.

Extend the theme section in your tailwind.config.ts to include custom brand colors in the colors object and typography scales in the fontSize and fontFamily sections. These tokens automatically become available as utility classes throughout your project.

Configure Tailwind's darkMode option and define CSS variables in the theme extension. Use content paths to specify which files contain class names, and configure dark mode handling—either 'class' or 'media'—to control how dark styles are applied across your design system.

Yes. Add Tailwind plugins to the plugins array in your tailwind.config.ts. Plugins integrate custom utilities and components into your theme, supporting animations, design tokens, and other extensions across all packages that reference the shared or extended config.

Tailwind configuration debugging involves verifying content paths match your file structure, checking that theme extensions are properly nested, and confirming plugin integrations. Validate each app-specific config references the correct base config and that shared tokens are accessible in all packages.