Tailwind v4

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

What's New

• The @next CLI can now initialize projects with Tailwind v4 and Svelte 5.
• Full support for the new @theme directive and @theme inline option.
• All components are updated for Tailwind v4 and Svelte 5.
• Every primitive that renders an element now has a data-slot attribute for styling.
• We've fixed and cleaned up the style of the components.
• 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 continue to work. When you add new components, they'll still be in Tailwind v3 with the style configured in components.json until you upgrade. Only new projects start with Tailwind v4.

See it Live

This documentation site is now using Tailwind v4 and Svelte 5, but for a more complete example, checkout the demo site here: https://v4.shadcn-svelte.com.

If you find any bugs, please us know on GitHub.

Try It Out

You can start using Tailwind v4 and Svelte 5 today using the @next CLI. See the specific install docs

Upgrade Your Project

One of the major advantages of using shadcn-svelte 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:

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 codemod to remove deprecated utility classes and update the 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. Update your dependencies

5. Replace tailwindcss-animate with tw-animate-css

We've deprecated tailwindcss-animate in favor of tw-animate-css.

New projects will have tw-animate-css installed by default.

For existing projects, follow the steps below:

1. Remove tailwindcss-animate from your dependencies.
2. Remove the @plugin 'tailwindcss-animate' from your app.css file.
3. Install tw-animate-css as a dev dependency.
4. Add the @import 'tw-animate-css' to your app.css file.

	- @plugin 'tailwindcss-animate'
+ @import 'tw-animate-css'

6. Update Your Colors (optional)

We've revisited the dark mode colors and updated them to be more accessible.

If you're running an existing Tailwind v4 project (not an upgraded one¹), you can update your components to use the new dark mode colors by re-adding your components using the CLI².

	git add .
git commit -m '..."