TailwindCSS 4

Currently, the default TailwindCSS for Newlogic UI is v3, to use v4 you can do following steps:

WARNING

With TailwindCSS v4 following features are not supported:

• Variants for Winduum components (#16000)
• Email templates doesn't support TailwindCSS v4

Remove following packages from devDependencies and run npm install

{
  "@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" layer(components);
@import "./utils/+.css" layer(utilities);
@import "winduum/tailwindcss/utilities/index.css";
@import "tailwindcss/utilities" layer(utilities);
@import "winduum/tailwindcss/variants/dark.css";
@import "./base/breakpoints.css";
@import "./base/keyframes.css";
@import "./base/transitions.css";

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'
            } 
        }) 
    ]
})