TailwindCSS has just released its stable version 4. To stay aligned, Winden has launched version 2.5.0, offering full support for TailwindCSS 4, along with complete configuration fallback and a Wizard.

Migrate project from Tailwind CSS 3 to 4 with Winden

In Winden you will need to do only 2 steps for this.

Step 1 – Under Settings > Change compiler version from 3.4.xx to 4.x.x

Step 2 – Change CSS calling

/* Tailwind CSS 3 */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Tailwind CSS 4 */
@import "tailwindcss";

Here’s an improved version with corrected grammar and clarity:

Tip: If you don’t want to remember the details, you can delete the entire style tag and press save. Winden will reload the browser and generate valid default CSS for V3 or V4, depending on which one you’ve chosen in the settings.

Winden Style tab

Winden now includes optimized autocomplete for both TailwindCSS 3 and 4.

Tailwind CSS 3 autocomplete object

Tailwind CSS 4 autocomplete object

Winden Config tab and v3 compatibility

We’ve got you covered! If you have projects with plugins that still don’t support TailwindCSS 3, or if you’ve created personalized plugins and configurations but aren’t ready to switch to CSS variables, don’t worry—just leave it as it is. That’s right! We’ll handle importing your configuration and optimizing the output for you.

Note: If you’ve created custom colors or other customizations, they won’t be added as CSS variables like in TailwindCSS 4. Instead, they will be appended to the end of the CSS file, exactly as you created or used them in TailwindCSS 3.

Winden Wizard

In the Winden wizard, we’ve collected the data and are doing all the heavy lifting for you. If you switch from TailwindCSS 3 to 4 under settings, we’ll handle the data differently. Instead of passing it to the configuration file, it will be imported as CSS variables, just like native TailwindCSS 4. This is why we strongly encourage users to switch to wizard-based configurations instead of managing configurations manually. Winden team continuously monitor Tailwind changes and optimize configurations on your behalf.

There is more!!!

Winden now features a new autocomplete system unified across all builders. We’ve worked hard to rethink autocomplete, and after exploring various solutions, most felt overly complex or not tailored to the TailwindCSS experience.

With the new Winden Plain Classes (autocomplete), you can organize your code by splitting styles per screen, making your writing more structured. Plus, there’s no need to remember breakpoint names anymore, even when switching between projects.