Tailwind v4
How to use shadcn-vue with Tailwind v4.
It's here! Tailwind v4. Ready for you to try out. You can start using it today.
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 ofsonner
. - Buttons now use the default cursor.
- We're deprecating the
default
style. New projects will usenew-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.
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:
- Move
:root
and.dark
out of the@layer
base. - Wrap the color values in
hsl()
- Add the
inline
option to@theme
i.e@theme inline
- 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. Update your dependencies
pnpm up reka-ui lucide-vue-next tailwind-merge clsx --latest