Enter your brand colors and get a tailwind.config.js with auto-expanded 50~900 (11 steps) for each.
🎨 Preview
📋 tailwind.config.js

How to use

  1. Enter 1-5 brand colors with names (e.g. primary, accent).
  2. Each is auto-expanded to 11 shades (50, 100, ... 900).
  3. Copy as tailwind.config.js or CSS variables.
  4. Paste into your project.

Tailwind shade scale

50 (lightest) → 500 (base) → 900 (darkest). Use 500 as primary, 700 for hover/pressed, 100 for backgrounds.

FAQ

Exact match with Tailwind official?

Approximation based on HSL Lightness adjustment.

Dark mode?

Use shades 200~300 as primary on dark backgrounds.

CSS Variables output?

Yes, separate button for CSS Variables format.

Free?

Yes.