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

[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

[gemue-parndt]

Any updates on this ?
Because sv create now takes TailwindCSS v4 per default ...

[ieedan]

Any updates on this ? Because sv create now takes TailwindCSS v4 per default ...

As mentioned above #1643 (comment)

[brnkgabriel]

While we wait for the official tailwind 4 integration, what worked for me was to:

1. Make a clean install of Sveltekit or Astro with tailwindcss 4
2. install bits-ui: https://bits-ui.com/
3. Copy the components from $lib/components/ui from the shadcn-svelte repo or my tailwindcss 3 projects

That worked for me

[brnkgabriel]

Another way for Astro svelte is to

• Install astro and shadcn as usual
• Create your tailwind.config.ts file so the shadcn install completes
• Once done, delete the tailwind.config.ts and paste this css in your app.css or global.css file

The CSS looks like this:
----------- START -------------------
@import "tailwindcss";
@plugin "tailwindcss-animate";
@variant dark (&:where(.dark, .dark *));

@theme {
--color-background: light-dark(hsl(0 0% 100%), hsl(240 10% 3.9%));
--color-foreground: light-dark(hsl(240 10% 3.9%), hsl(0 0% 98%));
--color-card: light-dark(hsl(0 0% 100%), hsl(240 10% 3.9%));
--color-card-foreground: light-dark(hsl(240 10% 3.9%), hsl(0 0% 98%));
--color-popover: light-dark(hsl(0 0% 100%), hsl(240 10% 3.9%));
--color-popover-foreground: light-dark(hsl(240 10% 3.9%), hsl(0 0% 98%));
--color-primary: light-dark(hsl(240 5.9% 10%), hsl(0 0% 98%));
--color-primary-foreground: light-dark(hsl(0 0% 98%), hsl(240 5.9% 10%));
--color-secondary: light-dark(hsl(240 4.8% 95.9%), hsl(240 3.7% 15.9%));
--color-secondary-foreground: light-dark(hsl(240 5.9% 10%), hsl(0 0% 98%));
--color-muted: light-dark(hsl(240 4.8% 95.9%), hsl(240 3.7% 15.9%));
--color-muted-foreground: light-dark(hsl(240 3.8% 46.1%), hsl(240 5% 64.9%));
--color-accent: light-dark(hsl(240 4.8% 95.9%), hsl(240 3.7% 15.9%));
--color-accent-foreground: light-dark(hsl(240 5.9% 10%), hsl(0 0% 98%));
--color-destructive: light-dark(hsl(0 72.22% 50.59%), hsl(0 62.8% 30.6%));
--color-destructive-foreground: light-dark(hsl(0 0% 98%), hsl(0 0% 98%));
--color-border: light-dark(hsl(240 5.9% 90%), hsl(240 3.7% 15.9%));
--color-input: light-dark(hsl(240 5.9% 90%), hsl(240 3.7% 15.9%));
--color-ring: light-dark(hsl(240 5.9% 10%), hsl(240 4.9% 83.9%));

--radius-lg: 0.5rem;
--radius-md: calc(var(--radius-lg) - 2px);
--radius-sm: calc(var(--radius-lg) - 4px);

}

@Utility container {
margin-inline: auto;
padding-inline: 2rem;

@media (width >= 1400px) {
	max-width: 1400px;
}

}
----------- END -------------------

[Wombosvideo]

@brnkgabriel Your app.css is a lot neater than mine, I should definitely change it. Keep in mind that your grandpa won't be able to use light-dark in his Windows XP's Internet Explorer though ;-)

[joelremix]

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

Are you able to remove the tailwind.config.ts from your repo since tailwind 4 doesn't use it anymore?

[joelremix]

While we wait for the official tailwind 4 integration, what worked for me was to:

1. Make a clean install of Sveltekit or Astro with tailwindcss 4
2. install bits-ui: https://bits-ui.com/
3. Copy the components from $lib/components/ui from the shadcn-svelte repo or my tailwindcss 3 projects

That worked for me

Why install bits-ui? Can you be a little more specific about how this whole method makes it work? Thanks

[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

Are you able to remove the tailwind.config.ts from your repo since tailwind 4 doesn't use it anymore?

@joelremix my repo doesn't have a tailwind.config.ts file in it so it already supports this functionality.

[andremacola]

It's not just updating Tailwind, numerous components need to be updated as well. For example, the sidebar doesn't work correctly in v4.

[joelremix]

It's not just updating Tailwind, numerous components need to be updated as well. For example, the sidebar doesn't work correctly in v4.

Did you update tailwindcss-animate? https://github.com/Wombosvideo/tailwindcss-animate-v4

[andremacola]

It's not just updating Tailwind, numerous components need to be updated as well. For example, the sidebar doesn't work correctly in v4.

Did you update tailwindcss-animate? https://github.com/Wombosvideo/tailwindcss-animate-v4

I did the update and it is working, thks for the tip. But what I meant is that it is necessary for shadcn-svelte to update the components for direct support of v4 in the repository.

Those who updated Tailwind to v4 may face problems when installing a new component.

If only the v4 migrate/upgrade script could run again, it wouldn’t be a big issue.

[niemyjski]

Sidebar is working great for me, no issues on tailwind 4

[memark]

Given that the upgrade tool makes changes to the shadcn components, like this for "Card",

I'm assuming you'd need to re-run it every time you add new components with the shadcn CLI?

[andremacola]

Given that the upgrade tool makes changes to the shadcn components, like this for "Card",

I'm assuming you'd need to re-run it every time you add new components with the shadcn CLI?

This is the problem, after you run the standard Tailwind v4 upgrade for the first time, you can't do it anymore. Unless you downgrade to v3 and run it again.

[Tyler-Petrov]

I also ran into that problem. There is a --force flag for the upgrade command, but it doesn't seem to do anything. I wish you could specify a specific directory and force an upgrade only for that directory, but alas.

[bnn1]

@memark you can install all components with pnpx shadcn-svelte@next add -a and run the upgrade tool. upgrade tool introduces a problem with sidebar component, so if you're planning to use it you should fix the classes manually. the problem is with css variables usage within classes. tailwindcss4 requires you to use var(--variable-name) but with upgrade tool it's just --variable-name. if i remember correctly the issue is with w-[--sidebar-width] class, you need to change that to w-[var(--sidebar-width)]

[jacokok]

I have been using this simple bash script to replace it with v4 classes that I can run after updating components.
It is ugly but been working fine for me until we have full tailwind 4 support. This solves the var() issue and outline-hidden classes.

sed -i -E 's/\[--([^]]*)\]/\(--\1\)/g; s/outline-none/outline-hidden/g' fileName

Here is the full script that loops over all files and runs sed.

#!/usr/bin/env bash

GREEN=$'\e[0;32m'
RED=$'\e[0;31m'
NC=$'\e[0m'

process_directory() {
  local dir="$1"

  if [[ ! -d "$dir" ]]; then
    echo "Error: Directory '$dir' not found."
    return 1
  fi

  find "$dir" -name "*.svelte" -print0 | while IFS= read -r -d $'\0' item; do
    sed -i -E 's/\[--([^]]*)\]/\(--\1\)/g; s/outline-none/outline-hidden/g' $item
    echo "${GREEN}${NC} "$item
  done

  find "$dir" -mindepth 1 -type d -print0 | while IFS= read -r -d $'\0' subdir; do
    process_directory "$subdir"
  done
}

process_directory "./src/lib/components/ui/"
echo "${GREEN} Tailwind 4 updated all! ${NC}"
exit 0