Tailwind Config Generator

Convert your palette to a Tailwind CSS config in one click.

Loading tool...

What is Tailwind Config Generator?

Paste your palette and get a drop-in tailwind.config.ts fragment. Optionally expand each color into a full 50-950 scale.

Frequently asked questions

+Which Tailwind version?

The output works with Tailwind CSS v3 and v4 (as extend.colors).

+Does it generate shades automatically?

Yes — toggle 'include full scale' to auto-expand each color into a perceptual 50-950 scale.

+Can I download the file?

Yes, there's a download button for tailwind.config.ts.

Related tools

CSS Variables Generator

Turn your palette into CSS custom properties with one click.

exportTry it →

Figma Tokens Export

Export your palette as Tokens Studio JSON for Figma.

exportTry it →

SCSS Variables Generator

Generate SCSS variables and maps from your palette.

exportTry it →

Name

Name

Name

Include full 50-950 scale per color

// tailwind.config.ts
import type { Config } from 'tailwindcss'

export default {
  content: ['./src/**/*.{ts,tsx}'],
  theme: {
    extend: {
      colors: {
        "primary": "#6366f1",
        "accent": "#ec4899",
        "success": "#22c55e",
      },
    },
  },
} satisfies Config