How to Format JSON for Tailwind CSS Configuration

As design systems scale, many teams export their design tokens from Figma or style dictionaries as a raw JSON file. Integrating this JSON directly into a tailwind.config.js file requires precise formatting to ensure Tailwind parses the utility classes correctly.

The Tailwind Format Requirement

Tailwind expects an object structure where keys are the specific utility suffix, and values are the CSS values. If your design tokens are exported as deeply nested JSON, you might need to flatten or restructure them.

Example of an Ideal JSON Format for Tailwind:

{
  "primary": "#3490dc",
  "secondary": "#ffed4a",
  "danger": "#e3342f",
  "spacing-sm": "8px",
  "spacing-md": "16px"
}

Importing JSON into tailwind.config.js

Once your JSON is properly formatted, you can import it directly into your Tailwind configuration:

const designTokens = require('./design-tokens.json');

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: designTokens.primary,
        secondary: designTokens.secondary,
        danger: designTokens.danger,
      },
      spacing: {
        'sm': designTokens['spacing-sm'],
        'md': designTokens['spacing-md'],
      }
    }
  }
}

Quickly Restructuring Raw Exports

If your Figma export is messy, paste it into our JSON Formatter. Use the "Tree View" to easily visualize the structure and decide how to map it to your Tailwind config.