Winden Wizard: Tailwind Color Shades and Fluid Type Scale

This progress update shows two big changes in the Winden Wizard. Tailwind CSS color shades are now edited in bulk with lightness, saturation and hue curves instead of one input per shade. The font size and spacing calculator also gets a new table layout that makes the fluid type scale easier to read and edit. If you build your Tailwind design system inside WordPress with Winden, this is where the Wizard is heading.

This is work in progress. Some parts of the calculator still need adjustments, and we'd like your suggestions before we finish it.

Winden progress update

We start from the current Winden Wizzard tab (next to Style (CSS), Config and Style Guide). In the old version, each color with Enable shades turned on showed a vertical list of hex inputs, one per shade. Three global fields controlled the whole range: Number of shades, Lightest point and Darkest point (10, 95 and 5 in the video). It worked, but tuning a palette meant editing fields one by one.

Tailwind colors are now locked

When you add a color from the Tailwind Colors list (Slate, Gray, Zinc, Stone, Red, Emerald, Fuchsia and so on), Winden now labels it as a Tailwind color and shows a lock next to the name. You can't click into it and edit it anymore. Tailwind's default colors are fixed values, so editing them made no sense.

New bulk shade-editing logic

We completely reworked how shades work. You now get one horizontal row of swatches (50 to 950), each with its own checkbox so you can turn individual shades on or off. Above it is a curve editor with three tabs:

• Lightness
• Saturation
• Hue

Each point on the curve is one shade. Drag the curve and the whole range updates together, so every shade slides into place correctly. In the video we use a crimson color (#ff2079) and adjust the Lightness curve to show how the steps shift.

Fixing washed-out light shades (saturation)

Some colors are hard to get right. When you switch to a darker blue base (#303f9f on screen), the light shades look washed out. That's why we added the Saturation tab:

1. Select the color and make sure Enable shades is checked.
2. Open the Saturation tab.
3. Raise the curve on the light end (50–400) and let it level off toward the dark shades.

With that change, the light shades look much nicer and keep the character of the base color.

Hue shift: warm vs cool shades

The Hue tab lets you shift the hue across the shade range. Often you want the lighter shades a bit warmer and the darker shades a bit cooler. It works like daylight: warm and sunny during the day, bluish as it gets dark. Tilt the hue curve and the 50 end moves toward warm tones while the 950 end moves toward cool ones. In the video, a crimson base turns deep purple in the darkest shades.

New fluid type-scale calculator

Font sizes and spacings get a new calculator. All the settings now sit in the left column:

• Min Font Size / Max Font Size (16 px and 19 px in the video)
• Min Ratio / Max Ratio (1.2 and 1.5)
• Min Screen / Max Screen (320 px and 1200 px)
• Mode: Wizard or Manual
• Scale Type: Fluid or Fixed
• Calculated Unit: REM or PX
• Builders Integration: Include FSE Sizes
• Keep Tailwind Default Sizes: Extend

On the right, Calculated Sizes shows the scale ratio as a table. The default step is the center (md in the demo, 16 → 19). Steps above it get smaller (base, sm, xs) and steps below it get bigger (lg, mega, giga …). Reset works the same as before.

Drag-and-drop base value

The table has the columns Default, Name, Min, Max, Enabled and Delete, so you can see everything at once. What's new:

1. Drag a row by its handle to move it, or pick a different row with the Default radio button to make it the base. Every other value is recalculated from it.
2. Rename any step in the Name field.
3. Type your own numbers into Min and Max.
4. Turn a step off with the Enabled toggle, or remove it with Delete.
5. Click + Add Step to extend the scale (new rows show up as step, step-2).

Fixed vs fluid scale settings

Switch Scale Type to Fixed and the calculator gets simpler. The max fields disappear from the settings, and the table swaps Min/Max for a single Font Size column. Each value is calculated from the base font size and the ratio. There are still a few things to fix here, but the live preview is still there. We didn't remove anything. We made it much clearer to see.

FAQ

Can I edit Tailwind's default colors in Winden?

No. Colors you add from the Tailwind Colors list are labeled as Tailwind colors and locked, because they are Tailwind's hard-coded defaults. Custom colors you add yourself stay editable.

How do I fix washed-out light shades of a color?

Open the Saturation tab in the shade editor and raise the curve on the light end of the range. The light shades get more saturated while the dark shades stay as they are.

What does the Hue curve do?

It shifts the hue across the shade range. You can make light shades slightly warmer and dark shades slightly cooler, like daylight changing from sunny to evening blue.

What is the difference between Fluid and Fixed scale type?

Fluid uses min and max font sizes, ratios and screen widths, so each step has a Min and Max value. Fixed has one Font Size per step, calculated from the base size and ratio.

Can I rename or add steps to the type scale?

Yes. Every name and number in the Calculated Sizes table is editable. You can drag the base step to a new position and add steps with + Add Step.

Get Winden → dplugins.com