Tailwind Theme Generator that Exports Production Tokens

Export ChromUI themes as Tailwind config. Merge into your tailwind.config.js for immediate use. Includes colors, typography, spacing, shadows, and border radius tokens.

Output Format

The Tailwind export generates a `theme.extend` configuration object. Colors are mapped to Tailwind's color system (primary, secondary, background, foreground, etc.). Typography tokens include font families, font sizes, line heights, and font weights compatible with Tailwind's typography plugin.

Spacing tokens use Tailwind's spacing scale. Shadow tokens map to Tailwind's boxShadow utilities. Border radius tokens use Tailwind's borderRadius scale. All tokens follow Tailwind's naming conventions.

How to Apply

Copy the generated config and merge it into your `tailwind.config.js` under `theme.extend`. Existing theme values are preserved. Use Tailwind utilities like `bg-primary`, `text-foreground`, `font-heading`, etc. Works with Tailwind CSS v3+.

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#10b981',
        'primary-foreground': '#ffffff',
        secondary: '#06b6d4',
        'secondary-foreground': '#ffffff',
        background: '#0f172a',
        foreground: '#f1f5f9',
        muted: '#1e293b',
        'muted-foreground': '#94a3b8',
        border: '#334155',
      },
      fontFamily: {
        heading: ['Inter', 'sans-serif'],
        body: ['Inter', 'sans-serif'],
        mono: ['JetBrains Mono', 'monospace'],
      },
      fontSize: {
        base: '1rem',
        sm: '0.875rem',
        lg: '1.125rem',
      },
      boxShadow: {
        sm: '0 2px 8px rgba(15,23,42,0.08)',
        md: '0 4px 16px rgba(15,23,42,0.12)',
        lg: '0 8px 24px rgba(15,23,42,0.16)',
      },
      borderRadius: {
        sm: '6px',
        md: '10px',
        lg: '16px',
      },
    },
  },
}