TailwindCSS 4

Since v4.1 the default TailwindCSS version is v4, to upgrade any project on v4.0 which uses TailwindCSS v3 follow these steps:

WARNING

With TailwindCSS v4 following features are not supported:

• Variants for Winduum components (#16000)

Upgrade the components to use layers (optional)

If your project uses responsive variants for any components, you'll need to follow this step as a workaround for the incompatibility in TailwindCSS v4. Now, each import must explicitly define its layer. By default, most components do not include the @utility at-rule, unless responsive variants are required. In such cases, the full usage of the component should look like this:

• Every custom property needs to be added to @theme at rule or in @layer theme
• Every class in the file needs to bude wrapped in @layer utilities
• Any responsive token needs to be written via @utility at rule

@import "winduum/src/components/heading/props/default.css" layer(theme);
@import "winduum/src/components/heading/default.css" layer(utilities);

@layer theme {
    :root, :host {
        --x-heading-font-weight: var(--font-bold);
        --x-heading-font-size: var(--text-xl);   
    }
}

@layer utilities {
    .x-heading {
        /* any custom styles */
    }
}

@utility sm {
  .x-heading:is(&) {
    --x-heading-font-size: var(--text-lg);
  }
}

@utility lg {
  .x-heading:is(&) {
    --x-heading-font-size: var(--text-3xl);
  }
}

If you don't use any responsive token variants, then you don't need to change anything and you can import all components under one layer like this:

@import "./components/+.css" layer(utilities);

Remove the following packages from devDependencies and run npm update

{
  "@tailwindcss/container-queries": "^0.1.1", 
  "@vituum/vite-plugin-tailwindcss": "^1.2.0", 
  "tailwindcss": "^3.4.17"
}

Change the imports in main.css to following

@import "tailwindcss/theme.css" layer(theme);
@import "winduum/tailwindcss/theme/config/index.css" layer(theme);
@import "./theme/main.css" layer(theme);
@import "winduum/src/base/reset.css" layer(base);
@import "./base/defaults.css" layer(base);
@import "./components/+.css";
@import "./utils/+.css";
@import "tailwindcss/utilities" layer(utilities);
@import "winduum/tailwindcss/variants/dark.css";
@import "./base/breakpoints.css";
@import "./base/keyframes.css";
@import "./base/transitions.css";

@source "../../node_modules/winduum/src";
@source not "../templates/emails";
@source not "../views/emails";

Change the main theme in theme/main.css to following

@import "winduum/src/theme/config/font.css"; 
@import "winduum/src/theme/config/mask.css"; 
@import "winduum/src/theme/config/radius.css"; 
@import "winduum/src/theme/config/spacing.css"; 
@import "winduum/src/theme/config/transition.css"; 
@import "winduum/src/theme/config/z.css"; 
@import "./dark.css";

:root, :host { 
@theme { 

Change the css transformer in vite.config.js to lightningcss

export default defineConfig({
    plugins: [
        core() 
        core({ 
            css: { 
                transformer: 'lightningcss'
            } 
        }) 
    ]
})

Change the imports in src/styles/emails/main.css to following

@import "tailwindcss/utilities" source(none);
@import "./base/+.css";
@import "./theme/config.css";
@import "./theme/default.css";
@import "./components/+.css";
@import "./utils/+.css";

@source "../../templates/emails";

And finally do the following:

• Copy directory src/styles/utils from v4.1 to your project
• Remove tailwindcss.config.js
• Remove .ncurc.json
• Update .stylelintrc from v4.1 to your project
• Review (bc) changes in Winduum from your previous version

For emails do the following:

• Change any use of :root in emails to @theme
• If you are using responsive utilities add @utility before each class
• Update the email layout from v4.1