Tailwind CSS Configurator

Build custom color palettes and spacing scales. Get an instant tailwind.config.js snippet or download theme.json - everything runs locally in your browser.

■ Brand Color Variables
■ Custom Spacing Scale
Visual Theme Preview
Custom Spacing Scale
tailwind.config.js
📚 Key Terms Explained
Utility-First CSS
A CSS methodology where you style elements by composing small, single-purpose class names (like p-4 or text-blue-500) directly in HTML rather than writing custom CSS rules. Tailwind is the most popular utility-first framework.
tailwind.config.js
The central configuration file for a Tailwind CSS project. It lives at the root of your project and controls your custom theme, plugins, content paths for purging, and any overrides to Tailwind's built-in design tokens.
Theme Extension
Adding your custom design tokens inside the theme.extend key merges them with Tailwind's defaults. The opposite approach - using theme without extend - replaces Tailwind's defaults entirely, removing all built-in utilities unless you redefine them.
Color Interpolation
The mathematical process of generating in-between color values. This tool blends your base color with white (for lighter shades) or black (for darker shades) at stepped percentages to create a full 10-step palette from a single chosen color.
REM vs PX
PX (pixels) are absolute units. REM (Root EM) units scale relative to the browser's root font size, typically 16px. At 16px root, 1rem = 16px. REM-based spacing respects user accessibility settings; PX does not. Tailwind uses REM for all spacing utilities.
Scale Multiplier
Determines how each successive spacing step grows. A linear scale adds the same base unit each step. A ratio multiplier (e.g. 1.618 Golden Ratio) multiplies each step, creating harmonic proportional growth - larger values space out faster. Ratio-based scales feel more natural to the eye in visual design.

The Complete Guide to Tailwind CSS Theme Configuration

Tailwind CSS ships with a beautifully designed default theme - but almost every real project needs to extend it with brand colors, a custom type scale, or a tighter spacing system. Understanding how the config file works lets you take full advantage of the framework instead of fighting against it.

How to use this tool

Select your brand colors using the pickers on the left. Each color you choose becomes the "500" weight of a full 10-step palette, generated by blending toward white and black. In the spacing panel, set your base unit in pixels (Tailwind's default is 4px), choose a scale type, and drag the steps slider. The visual preview and config output update instantly. When you're happy, click "Copy Config" to paste directly into your project, or "Download JSON" to save theme.json for use with a build pipeline.

Extending vs. overwriting the default theme

The output this tool generates lives inside theme.extend. That means your custom colors and spacing values are added alongside Tailwind's built-ins - you keep all 22 default color palettes, all default spacing steps, and every other utility. If you instead paste the output into theme directly (without extend), you will replace Tailwind's defaults and those built-in classes will disappear from your generated CSS.

How the color math works

Your chosen color is placed at the 500 weight. Shades 50, 100, 200, 300, and 400 are created by linearly blending your color with pure white: shade 50 is 95% white, shade 100 is 90%, up to shade 400 at 20% white. Shades 600, 700, 800, 900, and 950 blend toward pure black at the same graduated ratio. This mirrors the methodology Tailwind's core team used to design the default palette, so your custom colors will feel harmonically consistent with system colors like slate or stone.

Choosing the right spacing scale

The default 4px linear scale works well for component-dense UIs like dashboards and admin panels - steps are predictable and the numbers map to familiar Tailwind utilities (p-1 = 4px, p-2 = 8px). A 1.25x ratio scale adds gentle acceleration and suits most marketing sites. The Golden Ratio (1.618) creates dramatic spacing jumps that work beautifully for editorial layouts, large typography, and landing pages where whitespace is a design element. The right choice depends on your content density.

FAQ

How do I extend vs overwrite the default Tailwind theme? ▼
Using theme.extend in your tailwind.config.js adds your custom colors and spacing on top of Tailwind's built-in defaults, so you keep utilities like gray-100 or p-4. Using theme (without extend) replaces Tailwind's defaults entirely, meaning only your custom values are available. This tool generates output inside theme.extend so your existing design system is preserved.
How are the 50-950 color shades mathematically calculated? ▼
Your chosen color is treated as the 500 weight. Lighter shades (50, 100, 200, 300, 400) are created by blending your base color with pure white at stepped percentages. Darker shades (600, 700, 800, 900, 950) blend your base color with pure black. The result is a perceptually natural 10-step palette that mirrors how Tailwind's default palettes are constructed.
Why is it better to use REM units for spacing? ▼
REM units scale relative to the root font size (usually 16px). If a user changes their browser's default font size for accessibility reasons, REM-based spacing scales with it automatically, keeping proportions intact. PX values are absolute and do not respect user preferences. Tailwind itself uses REM for all spacing utilities, which is why this tool converts your pixel base unit to REM in the output.
How do I import this JSON file into my build process? ▼
After downloading theme.json, you can import it inside tailwind.config.js using: const theme = require('./theme.json'); Then spread its values inside theme.extend, for example: theme: { extend: { colors: theme.colors, spacing: theme.spacing } }. This keeps your config file clean and lets you version-control the theme separately from your Tailwind configuration.
What is the difference between a linear scale and a Golden Ratio scale for spacing? ▼
A linear scale adds the same amount to each step (e.g., 4px, 8px, 12px). A Golden Ratio scale (1.618) multiplies each step, creating rapid growth that feels naturally harmonious to the eye. The 1.25x and 1.5x options fall between these extremes. Linear scales are predictable and great for dense UIs; ratio-based scales suit editorial and spacing-heavy layouts.
Config copied to clipboard!