Tailwind CSS Theme Config Builder

Visually configure color scales, spacing, typography, and breakpoints, then export your tailwind.config.js.

Theme Customizer

Brand Primary Color

Generates primary color palette scale (50-950).

Secondary / Accent Color

Surface / Card Background

Base Spacing Scale Multiplier Affects gap, padding, and margin spacing scale mappings.

Default Border Radius

Primary Font Family

Base Font Size

Small Breakpoint (sm) 640px

Medium Breakpoint (md) 768px

Large Breakpoint (lg) 1024px

Live Playground Preview Screen: Desktop

Active Theme Breakpoint: lg

Tailwind CSS Component Card

This card dynamically adapts to your custom Tailwind config settings in real-time.

Exported tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      colors: {
        primary: "#ff4757",
        secondary: "#3b82f6",
      }
    },
  },
  plugins: [],
}