[✨] Switch to Tailwind 4

[tw1t611]

Is your feature request related to a problem?

Tailwind 4 was released quite some time ago.

Describe the solution you'd like

I think it is mandatory to switch to it at this point.

Describe alternatives you've considered

none

Additional context

No response

[zougari47]

Hi, You can upgrade to Tailwind 4 by removing tailwind.config.mjs file and update your global CSS file to this:
(don't forget to upgrade tailwind and replace the tw animate with CSS new one pnpm add tw-animate-css)

@import 'tailwindcss';
@import 'tw-animate-css';

/* @custom-variant dark (&:is(.dark *)); */

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 47.4% 11.2%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 47.4% 11.2%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 0 0% 100%;
    --secondary: 222.2 47.4% 11.2%;
    --secondary-foreground: 0 0% 100%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --alert: 0 84.2% 60.2%;
    --alert-foreground: 210 40% 98%;
    --ring: 222.2 47.4% 11.2%;
    --border-width: 0px;
    --border-radius: 0;
    --shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
    --shadow-md:
      0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg:
      0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl:
      0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
    --transform-press: scale(0.95);
  }
  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 0 0% 100%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 0 0% 0%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --alert: 0 84.2% 60.2%;
    --alert-foreground: 210 40% 98%;
    --ring: 212.7 26.8% 83.9;
    --border-width: 0px;
    --border-radius: 0;
    --shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
    --shadow-md:
      0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg:
      0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl:
      0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
    --transform-press: scale(0.95);
  }
}

@theme inline {
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));
  --color-alert: hsl(var(--alert));
  --color-alert-foreground: hsl(var(--alert-foreground));
  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));
  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));
  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));
  --radius-xs: var(--border-radius);
  --radius-sm: calc(var(--border-radius) + 0.125rem);
  --radius-md: calc(var(--border-radius) + 0.375rem);
  --radius-lg: calc(var(--border-radius) + 0.5rem);
  --radius-xl: calc(var(--border-radius) + 0.75rem);
  --radius-2xl: calc(var(--border-radius) + 1rem);
  --radius-3xl: calc(var(--border-radius) + 1.5rem);
  --default-border-width: calc(var(--border-width) + 1px);
  --border-2: calc(var(--border-width) + 2px);
  --border-4: calc(var(--border-width) + 4px);
  --border-8: calc(var(--border-width) + 8px);
  --shadow-xs: var(--shadow-base);
  --shadow-sm: var(--shadow-sm);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-2xl: var(--shadow-2xl);
  --shadow-inner: var(--shadow-inner);
  --stroke-0: 0;
  --stroke: var(--stroke-width);
  --stroke-1: calc(var(--stroke-width) + 1px);
  --stroke-2: calc(var(--stroke-width) + 2px);
  --animate-accordion-down: collapsible-down 0.2s ease-out forwards;
  --animate-accordion-up: collapsible-up 0.2s ease-out forwards;

  @keyframes collapsible-down {
    from {
      height: 0;
    }
    to {
      height: var(--qwikui-collapsible-content-height);
    }
  }
  @keyframes collapsible-up {
    from {
      height: var(--qwikui-collapsible-content-height);
    }
    to {
      height: 0;
    }
  }
}

@layer utilities {
  .press {
    transform: var(--transform-press);
  }
}

[maiieul]

Hi @tw1t611 I've started working on this a month ago. It's taking a little longer than expected.

The reason is it's a little tricky is because the way the styled kit is currently working with -base utilities for one-click theme changes (e.g. simple to brutalist) isn't compatible with the new css configuration since the new config css functions don't support extending the theme with a new -base and extending the values from there...

I investigated a way to keep supporting the brutalist styles using native css @layer (instead of tailwind-merge:#1111). But it's quite a bit of cli and docs site work so I will probably just remove the brutalist styles from the "Make it yours" for a bit and then we can more easily upgrade to tailwind v4.

In the meantime you can use @zougari47's solution.

[maiieul]

Okay small update, I managed to update everything to v4 without breaking changes (on our end, the Modal will need to be updated in your projects because of tailwind v4 breaking changes). Once #1122 is merged you copy the config from the docs' "Make it Yours", or use the cli in a fresh project.