JSON Design Tokens

tailwind.config.js

Tailwind config will appear here...

What is JSON to Tailwind CSS Config Generator?

Tailwind CSS is a utility-first CSS framework that lets you build designs by composing small, single-purpose classes directly in your HTML. Its configuration file (tailwind.config.js or tailwind.config.ts) is the central place where you define your design system — colors, spacing scales, font families, border radii, font sizes, and breakpoints. This tool takes a JSON object containing your design tokens and produces a properly structured Tailwind config file. It automatically routes each token category to the correct location: colors, spacing, fontFamily, borderRadius, and fontSize go under theme.extend to preserve Tailwind defaults, while screens goes directly under theme to replace the default breakpoints. The result is a ready-to-use config that integrates seamlessly with your Tailwind project.

How to Use

Prepare your design tokens as a JSON object with recognized keys: colors, spacing, fontFamily, borderRadius, fontSize, or screens
Paste the JSON into the input panel on the left side
Click the Options button to choose between JavaScript (.js) and TypeScript (.ts) output, and toggle which theme sections to include
Click "Generate" to produce the Tailwind configuration file
Copy the output and save it as tailwind.config.js or tailwind.config.ts in your project root directory

Why Use This Tool?

Automatically routes each token category to the correct Tailwind theme section — no manual placement needed

Supports both JavaScript (module.exports) and TypeScript (typed default export) config formats

Handles nested color objects for full palette definitions (e.g., { primary: { 50: "#eff6ff", 500: "#3b82f6", 900: "#1e3a8a" } })

Preserves numeric keys for color shades so Tailwind generates proper utility classes like bg-primary-500

Screens go directly under theme to replace defaults, while other sections go under theme.extend to preserve Tailwind defaults

Tips & Best Practices

Use numeric string keys for color shades: "50", "100", "200" through "900" to generate the full palette of utility classes
The "screens" key maps directly to theme.screens rather than theme.extend.screens, because most projects want to replace the default breakpoints entirely
All other recognized keys (colors, spacing, fontFamily, borderRadius, fontSize) go under theme.extend to preserve Tailwind defaults while adding your custom values
For TypeScript projects, use the TS output format to get proper type checking with the Config type import
You can add custom plugins to the generated config by modifying the empty plugins array after generation

Frequently Asked Questions

What JSON keys are supported?

The tool recognizes six token categories: 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.

When should I NOT use this tool?

Skip this tool if you need to configure Tailwind features beyond theme tokens, such as custom corePlugins, important selectors, or prefix settings. Also, if your design tokens use a different structure than what Tailwind expects (e.g., Figma-style tokens with nested "value" and "type" keys), you will need to transform them first before pasting them here.

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 any external 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: [],
};

Responsive breakpoint configuration

Define custom breakpoints that replace Tailwind defaults, generating a screens section under theme rather than theme.extend.