Tailwind 4 support

[wiesson]

Prerequisites

• This feature already exists in shadcn/ui - if not, it won't be considered here so don't continue with your issue.

Describe the feature

Tailwind 4 has been released https://tailwindcss.com/blog/tailwindcss-v4 and it would be nice to see some official support here!

Ticket in shadcn/ui
👉 shadcn-ui/ui#6427

[Wombosvideo]

If you migrated locally using the CLI and are using the default theme (not New York) you may want to remove tailwindcss-animate and replace it with a CSS-first version: https://github.com/Wombosvideo/tailwindcss-animate-v4

[andre-brandao]

daisyui + tailwind 4 + shadcn

[tzcrawford]

I think shadcn upstream is still working on fully supporting tailwind 4.

Here's a discussion thread on that project.

Here's a recent pull request on the topic.

It sounds like there is some fundamental changes that needs to happen to the setup, which depends on the now deprecated tailwind config file. Likewise there is some work needed on a per-component basis that is currently beong worked on.

@huntabyte, are you familiar with this issue, do you have an update, and do you have an idea what needs to be done in this repo for the tailwind migration?

[Wombosvideo]

It sounds like there is some fundamental changes that needs to happen to the setup, which depends on the now deprecated tailwind config file. Likewise there is some work needed on a per-component basis that is currently beong worked on.

I have already successfully migrated my project to Tailwind v4, but since variants isn't migrated yet, it has a few sizing/padding issues due to ! (for !important) being in a different place. This only affects two elements in my setup, both in the collapsed sidebar. fixed by updating merge

I will push a migration commit for my project tomorrow or in a few days so you can take a look.

[Wombosvideo]

This is the migration commit of my project, as promised:
heviat/Mailu-OIDC@2c9cf75

[rafia9005]

I think shadcn upstream is still working on fully supporting tailwind 4.

Here's a discussion thread on that project.

Here's a recent pull request on the topic.

It sounds like there is some fundamental changes that needs to happen to the setup, which depends on the now deprecated tailwind config file. Likewise there is some work needed on a per-component basis that is currently beong worked on.

@huntabyte, are you familiar with this issue, do you have an update, and do you have an idea what needs to be done in this repo for the tailwind migration?

you can downgrade to tailwind 3 version to fix the issues
Tailwind css 3

[wiesson]

I used the upgrade command from tailwind (pnpx @tailwindcss/upgrade@next) and as far as I can tell, it just works. Some drawer opening animations are a bit odd, but I have to check them later. I also did not move to the CSS only config.

[krishna-santosh]

Thank you @wiesson, using @tailwindcss/upgrade@next did the trick.

[accuser]

As @wiesson suggested, using pnpx @tailwindcss/upgrade@next works, but only if you're migrating from TailwindCSS 3.x. New SvelteKit projects are defaulting to using TailwindCSS 4.x.

I was able to downgrade to tailwindcss@3 (and install autoprefixer and postcss) and configure TailwindCSS, re-initialise shadcn-svelte, and then migrate. It was a pain, but it worked.

I think a key issue is that TailwindCSS 4.x has dropped the requirement for a tailwind.config.js (or .ts) preferring a CSS-first configuration instead. shadcn-svelte@next init is expecting the config file to exist and won't proceed without one. A config file can still be used so generating one if it doesn't exist might be the solution.

There have also been changes to the utility classes that need to be reflected in the components. Whilst @tailwind/upgrade@next can be used initially to address these changes, it can only be used once.

[cowboycodr]

This issue has gone from "nice to have" to required for functionality with the latest SvelteKit updates.

SvelteKit, now, by default uses TailwindCSS 4 and no longer generates the necessary "tailwind.config.ts" file. Meaning, you cannot use npx shadcn-svelte@next init straight out of the box without having to do a whole bunch of configuration beforehand.

[ieedan]

This issue has gone from "nice to have" to required for functionality with the latest SvelteKit updates.

SvelteKit, now, by default uses TailwindCSS 4 and no longer generates the necessary "tailwind.config.ts" file. Meaning, you cannot use npx shadcn-svelte@next init straight out of the box without having to do a whole bunch of configuration beforehand.

This is why we have pinned the sv version to a version that still supports tailwind v3. Please take a look at our installation docs.

https://next.shadcn-svelte.com/docs/installation/sveltekit

[Tyler-Petrov]

I will push a migration commit for my project tomorrow or in a few days so you can take a look.

@Wombosvideo You're a lifesaver. Looking at your project showed me what I needed that I couldn't find anywhere else.

[MattL-NZ]

I have a small starter repo that can be used. Built based on @Wombosvideo setup.
https://github.com/MattL-NZ/svelte-tailwind4-starter

[IslamZaoui]

I also made an unofficial turborepo starter for sveltekit + shadcn and migrated it to Tailwind v4 here.
thx @Wombosvideo and @MattL-NZ for the examples