It's here! Tailwind v4. Ready for you to try out. You can start using it today.

Get Started See Demo

What's New

• The CLI can now initialize projects with Tailwind v4.
• Full support for the new @theme directive and @theme inline option.
• All components are updated for Tailwind v4.
• Every primitive now has a data-slot attribute for styling.
• We've fixed and cleaned up the style of the components.
• We're deprecating the toast component in favor of sonner.
• Buttons now use the default cursor.
• We're deprecating the default style. New projects will use new-york.
• HSL colors are now converted to OKLCH.

Note: this is non-breaking. Your existing apps with Tailwind v3 will still work. When you add new components, they'll still be in v3 until you upgrade. Only new projects start with Tailwind v4.

See it Live

I put together a demo with all the updated components here: https://v4.shadcn-vue.com

Take a look and test the components. If you find any bugs, please let me know on GitHub.

Try It Out

See the framework specific guides below for how to get started.

Vite

Nuxt

Astro

Laravel

Manual

Upgrade Your Project

Important: Before upgrading, please read the Tailwind v4 Compatibility Docs and make sure your project is ready for the upgrade. Tailwind v4 uses bleeding-edge browser features and is designed for modern browsers.

One of the major advantages of using shadcn-vue is that the code you end up with is exactly what you'd write yourself. There are no hidden abstractions.

This means when a dependency has a new release, you can just follow the official upgrade paths.

Here's how to upgrade your existing projects (full docs are on the way):

1. Follow the Tailwind v4 Upgrade Guide

• Upgrade to Tailwind v4 by following the official upgrade guide: https://tailwindcss.com/docs/upgrade-guide
• Use the @tailwindcss/upgrade@next codemod to remove deprecated utility classes and update tailwind config.

2. Update your CSS variables

The codemod will migrate your CSS variables as references under the @theme directive.

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
  }
}

@theme {
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
}

This works. But to make it easier to work with colors and other variables, we'll need to move the hsl wrappers and use @theme inline.

Here's how you do it:

1. Move :root and .dark out of the @layer base.
2. Wrap the color values in hsl()
3. Add the inline option to @theme i.e @theme inline
4. Remove the hsl() wrappers from @theme

:root {
  --background: hsl(0 0% 100%); // <-- Wrap in hsl
  --foreground: hsl(0 0% 3.9%);
}

.dark {
  --background: hsl(0 0% 3.9%); // <-- Wrap in hsl
  --foreground: hsl(0 0% 98%);
}

@theme inline {
  --color-background: var(--background); // <-- Remove hsl
  --color-foreground: var(--foreground);
}

This change makes it much simpler to access your theme variables in both utility classes and outside of CSS for eg. using color values in JavaScript.

3. Use new size-* utility

The new size-* utility (added in Tailwind v3.4), is now fully supported by tailwind-merge. You can replace w-* h-* with the new size-* utility:

- w-4 h-4
+ size-4

4. Install and Update your dependencies

pnpm i tw-animate-css
pnpm up reka-ui lucide-vue-next tailwind-merge clsx --latest