What is JSON to Tailwind CSS Config Generator?

Tailwind CSS uses a configuration file (tailwind.config.js or tailwind.config.ts) to customize the default theme with your design tokens. This tool converts JSON design token files into a properly structured Tailwind config, mapping keys like "colors", "spacing", and "fontFamily" to the correct theme.extend sections automatically.

How to Use

Paste your JSON design tokens or theme configuration into the input panel.
Configure output options: choose JS or TS format, and toggle which theme sections to include.
Click "Generate" to produce the Tailwind config file.
Copy the output and save it as tailwind.config.js or tailwind.config.ts in your project root.

Why Use This Tool?

Automatically maps JSON keys to the correct Tailwind theme sections

Supports both JavaScript and TypeScript config output formats

Handles nested color objects (e.g., { primary: { 500: "#3b82f6" } })

Generates proper module.exports (JS) or typed default export (TS) syntax

Preserves numeric keys for color shades (50, 100, 500, 900, etc.)

Tips & Best Practices

Use numeric string keys for color shades: "50", "100", "200" ... "900" for the full palette.
The "screens" key maps directly to theme.screens (not theme.extend.screens) to replace defaults.
All other recognized keys (colors, spacing, fontFamily, borderRadius, fontSize) go under theme.extend to preserve Tailwind defaults.
For TypeScript projects, use the TS output format to get proper type checking with the Config type.
You can add custom plugins to the generated config by modifying the plugins array.

Frequently Asked Questions

What JSON keys are supported?

The tool recognizes: colors, spacing, fontFamily, borderRadius, fontSize, and screens. Each key maps to the corresponding Tailwind theme section. Colors, spacing, fontFamily, borderRadius, and fontSize go under theme.extend, while screens goes directly under theme to replace the default breakpoints.

How are nested color objects handled?

Nested objects are preserved in the output. For example, { "primary": { "50": "#eff6ff", "500": "#3b82f6" } } generates colors.primary["50"] and colors.primary["500"] in the config, which Tailwind uses as bg-primary-50, text-primary-500, etc.

What is the difference between JS and TS output?

The JS output uses module.exports with a JSDoc type annotation: /** @type {import('tailwindcss').Config} */ module.exports = { ... }. The TS output uses a typed const with a default export: import type { Config } from 'tailwindcss'; const config: Config = { ... }; export default config;.

Why does "screens" not go under theme.extend?

Tailwind CSS treats screens (breakpoints) differently. When you define screens under theme.extend, it merges with defaults. But most projects want to replace the default breakpoints entirely, so the tool places screens directly under theme. If you want to extend instead, move it to theme.extend.screens manually.

Is my data sent to a server?

No. All processing happens entirely in your browser. Your design tokens and configuration are never transmitted to any server. This tool works offline and keeps your data completely private.

Real-world Examples

Design System Tokens

Convert a design system token file into a Tailwind config for consistent styling across your application.

Input

{
  "colors": {
    "brand": {
      "50": "#eff6ff",
      "500": "#3b82f6",
      "900": "#1e3a8a"
    },
    "surface": "#ffffff",
    "muted": "#64748b"
  },
  "spacing": {
    "xs": "0.25rem",
    "sm": "0.5rem",
    "md": "1rem",
    "lg": "1.5rem",
    "xl": "2rem"
  },
  "borderRadius": {
    "sm": "0.25rem",
    "md": "0.5rem",
    "lg": "0.75rem"
  }
}

Output

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#eff6ff',
          500: '#3b82f6',
          900: '#1e3a8a',
        },
        surface: '#ffffff',
        muted: '#64748b',
      },
      spacing: {
        xs: '0.25rem',
        sm: '0.5rem',
        md: '1rem',
        lg: '1.5rem',
        xl: '2rem',
      },
      borderRadius: {
        sm: '0.25rem',
        md: '0.5rem',
        lg: '0.75rem',
      },
    },
  },
  plugins: [],
};

JSON to Tailwind CSS Config Generator