Shadcn/ui upgrade to Tailwindcss v.4 #2996

Mac-DevOSYandex · 2024-03-12T16:26:15Z

Mac-DevOSYandex
Mar 12, 2024

When will shadcn ui upgrade to tailwind css v.4? daisyUI has already done so...

adaptive-shield-matrix · 2024-03-14T09:19:04Z

adaptive-shield-matrix
Mar 14, 2024

Jack recorded/noticed some problems migrating shadcn-ui to Tailwind v4
https://www.youtube.com/watch?v=YzQrHnlWyZ0

7 replies

Mujahid087 Jan 25, 2025

same thing is happening with me

mounirbelhniyene Jan 25, 2025

If using npx tailwindcss init is needed, use this npx [email protected] init --full

yeasin2002 Jan 25, 2025

But i can't install Tailwind v3, "npx tailwindcss init", dosen't work :(

kindly check doc, it has changed a lot

ayushpatwal011 Jan 26, 2025

when its start working?

AswinArsha Feb 1, 2025

Those are not problems with migrating shadcn-ui to Tailwind v4, he states that the current Shadcn version does not yet support Tailwind v4.

But i can't install Tailwind v3, "npx tailwindcss init", dosen't work :(

try this :
npm install -D tailwindcss@3
npx tailwindcss init

redjohnsh · 2024-11-23T13:30:29Z

redjohnsh
Nov 23, 2024

It might be time to revisit this since tailwind just dropped a public beta.

1 reply

Codngwthubaid Jan 27, 2025

V4 release but shadcn is not suitable right now to handle it, it creates problem in the development

dstroot · 2024-12-03T22:11:33Z

dstroot
Dec 3, 2024

shadcn/ui works with Tailwindcss v4. Here is an example TW4 globals.css file:

@import "tailwindcss";

@variant dark (&:is(.dark *));

@plugin "tailwindcss-animate";

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

  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));

  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));

  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));

  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));

  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));

  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));

  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));

  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));

  --color-chart-1: hsl(var(--chart-1));
  --color-chart-2: hsl(var(--chart-2));
  --color-chart-3: hsl(var(--chart-3));
  --color-chart-4: hsl(var(--chart-4));
  --color-chart-5: hsl(var(--chart-5));

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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --border-shadow: 255, 255, 255, 0.145;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

I am not sure if this is the best way but I would love a very simple Nextjs, Tailwind and shadcn/ui setup on Next v15 and Tailwind v4. I have that working but it seems like there should be a "better way" - I wish shadcn would just fully adopt tailwind variables and not have special "shadcn" variables. Also not sure if this is the best dark mode approach - but it's how shadcn currently works. Cheers!

0 replies

dstroot · 2024-12-06T02:23:05Z

dstroot
Dec 6, 2024

Here's one that's a little cleaner and shows various ways to define the colors:

@import "tailwindcss";

@variant dark (&:where(.dark, .dark *));

@plugin "tailwindcss-animate";

@theme {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);
}

@layer base {
  :root {
    --background: var(--color-neutral-50);
    --foreground: var(--color-neutral-900);
    --card: hsl(0 0% 100%);
    --card-foreground: hsl(0 0% 3.9%);
    --popover: hsl(0 0% 100%);
    --popover-foreground: hsl(0 0% 3.9%);
    --primary: hsl(0 0% 9%);
    --primary-foreground: hsl(0 0% 98%);
    --secondary: hsl(0 0% 96.1%);
    --secondary-foreground: hsl(0 0% 9%);
    --muted: hsl(0 0% 96.1%);
    --muted-foreground: hsl(0 0% 45.1%);
    --accent: hsl(0 0% 96.1%);
    --accent-foreground: hsl(0 0% 9%);
    --destructive: hsl(0 84.2% 60.2%);
    --destructive-foreground: hsl(0 0% 98%);
    --border: hsl(0 0% 89.8%);
    --input: hsl(0 0% 89.8%);
    --ring: hsl(0 0% 3.9%);
    --chart-1: hsl(12 76% 61%);
    --chart-2: hsl(173 58% 39%);
    --chart-3: hsl(197 37% 24%);
    --chart-4: hsl(43 74% 66%);
    --chart-5: hsl(27 87% 67%);
    --radius: 0.5rem;
  }

  .dark {
    --background: var(--color-neutral-950);
    --foreground: var(--color-neutral-100);
    --card: hsl(0, 0%, 3.9%);
    --card-foreground: hsl(0 0% 98%);
    --popover: hsl(0 0% 3.9%);
    --popover-foreground: hsl(0 0% 98%);
    --primary: hsl(0 0% 98%);
    --primary-foreground: hsl(0 0% 9%);
    --secondary: hsl(0 0% 14.9%);
    --secondary-foreground: hsl(0 0% 98%);
    --muted: hsl(0 0% 14.9%);
    --muted-foreground: hsl(0 0% 63.9%);
    --accent: hsl(0 0% 14.9%);
    --accent-foreground: hsl(0 0% 98%);
    --destructive: hsl(0 62.8% 30.6%);
    --destructive-foreground: hsl(0 0% 98%);
    --border: hsl(0 0% 14.9%);
    --input: hsl(0 0% 14.9%);
    --ring: hsl(0 0% 83.1%);
    --chart-1: hsl(220 70% 50%);
    --chart-2: hsl(160 60% 45%);
    --chart-3: hsl(30 80% 55%);
    --chart-4: hsl(280 65% 60%);
    --chart-5: hsl(340 75% 55%);
  }
}

0 replies

ioeldev · 2024-12-16T07:11:41Z

ioeldev
Dec 16, 2024

@dstroot I don't think that shadcn/ui works with Tailwindcss v4, most of the shadcn components are not displayed correctly when migrating to v4, and I had to update each component one by one to make them how they was before migration. I rolled back to v3 until official support ...

1 reply

adaptive-shield-matrix Dec 16, 2024

I got a compile/vite error and a white page instead.
I think we will have to manually edit all components one by one anyway - for poeple like me who used the manual installation and made some customization changes to them....

arsmth · 2024-12-17T15:49:54Z

arsmth
Dec 17, 2024

Can likely bin the hsl abstraction now thanks to simplified variable colours.

@import "tailwindcss";

@plugin "tailwindcss-animate";

@variant dark (&:where(.dark, .dark *));

@theme {
  --color-background: var(--color-white);
  --color-foreground: var(--color-slate-900);
  --color-card: var(--color-white);
  --color-card-foreground: var(--color-slate-900);
  --color-popover: var(--color-white);
  --color-popover-foreground: var(--color-slate-900);
  --color-primary: var(--color-slate-900);
  --color-primary-foreground: var(--color-slate-50);
  --color-secondary: var(--color-slate-100);
  --color-secondary-foreground: var(--color-slate-900);
  --color-muted: var(--color-slate-100);
  --color-muted-foreground: var(--color-slate-500);
  --color-accent: var(--color-slate-100);
  --color-accent-foreground: var(--color-slate-900);
  --color-destructive: var(--color-rose-500);
  --color-destructive-foreground: var(--color-slate-50);
  --color-border: var(--color-slate-200);
  --color-input: var(--color-slate-200);
  --color-ring: var(--color-slate-400);

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

@layer theme {
  .dark {
    --color-background: var(--color-zinc-950);
    --color-foreground: var(--color-zinc-50);
    --color-card: var(--color-zinc-950);
    --color-card-foreground: var(--color-zinc-50);
    --color-popover: var(--color-zinc-950);
    --color-popover-foreground: var(--color-zinc-50);
    --color-primary: var(--color-zinc-50);
    --color-primary-foreground: var(--color-zinc-900);
    --color-secondary: var(--color-zinc-800);
    --color-secondary-foreground: var(--color-zinc-50);
    --color-muted: var(--color-zinc-800);
    --color-muted-foreground: var(--color-zinc-400);
    --color-accent: var(--color-zinc-800);
    --color-accent-foreground: var(--color-zinc-50);
    --color-destructive: var(--color-rose-700);
    --color-destructive-foreground: var(--color-zinc-50);
    --color-border: var(--color-zinc-800);
    --color-input: var(--color-zinc-800);
    --color-ring: var(--color-zinc-300);
  }
}

@layer base {
  *,
  ::before,
  ::after {
    border-color: var(--color-border);
  }
}

0 replies

izziaraffaele · 2024-12-28T01:06:55Z

izziaraffaele
Dec 28, 2024

I like the approach of @dstroot but dark mode wasn't working for me without using the @theme inline directive. I also prefer using simplified variable colors as suggested by @arsmth. So here is my implementation which show also how to define multiple optional themes

https://play.tailwindcss.com/ErFtdWw2f5?file=css

@import "tailwindcss";

@variant dark (&:where(.dark, .dark *));

@plugin "tailwindcss-animate";

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);
}

/* Default theme */
@layer base {
  :root {
    --background: var(--color-white);
    --foreground: var(--color-slate-900);
    --card: var(--color-white);
    --card-foreground: var(--color-slate-900);
    --popover: var(--color-white);
    --popover-foreground: var(--color-slate-900);
    --primary: var(--color-slate-900);
    --primary-foreground: var(--color-slate-50);
    --secondary: var(--color-slate-100);
    --secondary-foreground: var(--color-slate-900);
    --muted: var(--color-slate-100);
    --muted-foreground: var(--color-slate-500);
    --accent: var(--color-slate-100);
    --accent-foreground: var(--color-slate-900);
    --destructive: var(--color-rose-500);
    --destructive-foreground: var(--color-slate-50);
    --border: var(--color-slate-200);
    --input: var(--color-slate-200);
    --ring: var(--color-slate-400);
    --chart-1: hsl(12 76% 61%);
    --chart-2: hsl(173 58% 39%);
    --chart-3: hsl(197 37% 24%);
    --chart-4: hsl(43 74% 66%);
    --chart-5: hsl(27 87% 67%);
    --radius: 0.5rem;
  }

  .dark {
    --background: var(--color-zinc-950);
    --foreground: var(--color-zinc-50);
    --card: var(--color-zinc-950);
    --card-foreground: var(--color-zinc-50);
    --popover: var(--color-zinc-950);
    --popover-foreground: var(--color-zinc-50);
    --primary: var(--color-zinc-50);
    --primary-foreground: var(--color-zinc-900);
    --secondary: var(--color-zinc-800);
    --secondary-foreground: var(--color-zinc-50);
    --muted: var(--color-zinc-800);
    --muted-foreground: var(--color-zinc-400);
    --accent: var(--color-zinc-800);
    --accent-foreground: var(--color-zinc-50);
    --destructive: var(--color-rose-700);
    --destructive-foreground: var(--color-zinc-50);
    --border: var(--color-zinc-800);
    --input: var(--color-zinc-800);
    --ring: var(--color-zinc-300);
    --chart-1: hsl(220 70% 50%);
    --chart-2: hsl(160 60% 45%);
    --chart-3: hsl(30 80% 55%);
    --chart-4: hsl(280 65% 60%);
    --chart-5: hsl(340 75% 55%);
  }
}

/* Theme variant */
@layer base {
  [data-theme="example"] {
    --background: var(--color-blue-50); 
    --foreground: var(--color-gray-900);
    --card: var(--color-blue-100); 
    --card-foreground: var(--color-gray-800);
    --popover: var(--color-blue-50);
    --popover-foreground: var(--color-gray-800);
    --primary: var(--color-blue-100); 
    --primary-foreground: var(--color-gray-900); 
    --secondary: var(--color-blue-400); 
    --secondary-foreground: var(--color-gray-800);
    --muted: var(--color-emerald-100); 
    --muted-foreground: var(--color-gray-600);
    --accent: var(--color-emerald-200); 
    --accent-foreground: var(--color-gray-800);
    --destructive: var(--color-red-700);
    --destructive-foreground: var(--color-gray-200);
    --border: var(--color-blue-600); 
    --input: var(--color-blue-800); 
    --ring: var(--color-blue-100);
    --radius: 0.3rem;
  }
  .dark [data-theme="example"],
  .dark[data-theme="example"] {
    --background: var(--color-gray-900); 
    --foreground: var(--color-gray-200); 
    --card: var(--color-gray-900); 
    --card-foreground: var(--color-gray-200); 
    --popover: var(--color-gray-950);
    --popover-foreground: var(--color-gray-200); 
    --primary: var(--color-blue-500); 
    --primary-foreground: var(--color-blue-50);
    --secondary: var(--color-blue-800); 
    --secondary-foreground: var(--color-blue-50); 
    --muted: var(--color-emerald-900); 
    --muted-foreground: var(--color-gray-500); 
    --accent: var(--color-emerald-900); 
    --accent-foreground: var(--color-gray-200); 
    --destructive: var(--color-red-700); 
    --destructive-foreground: var(--color-gray-200); 
    --border: var(--color-blue-800); 
    --input: var(--color-blue-800); 
    --ring:var(--color-blue-100); 
    --radius: 0.3rem;
  }
}

5 replies

FurkanCodes Jan 23, 2025

With the release of tailwind v4, npx @tailwindcss/upgrade@next successfully emigrated my app to tailwind v4.

bangonkali Jan 23, 2025

I just tested upgrading to tailwind 4 using vite, not postcss. Basically, I used @izziaraffaele 's code as index.css. Everything worked with existing code.

Unfortunately if i do bunx --bun shadcn@latest init -f -y with the intention to upgrade all existing shadcn components, I get the following error:

Resolving dependencies
Resolved, downloaded and extracted [2]
Saved lockfile
- Preflight checks.
✔ Preflight checks.
- Verifying framework.
✔ Verifying framework. Found Vite.
- Validating Tailwind CSS.
✖ Validating Tailwind CSS.
- Validating import alias.
✔ Validating import alias.

No Tailwind CSS configuration found at C:\Users\Bangonkali\Desktop\Projects\blocks\src\Blocks.Service.Web\Client.
It is likely you do not have Tailwind CSS installed or have an invalid configuration.
Install Tailwind CSS then try again.
Visit https://tailwindcss.com/docs/guides/vite to get started.

bangonkali Jan 23, 2025

Okay, as it turns out, in order for my previous issue to work, i had to add back the three @tailwind lines below as per #4677 (comment):

@import "tailwindcss";

/* Make sure these exists! */
@tailwind base;
@tailwind components;
@tailwind utilities;

@variant dark (&:where(.dark, .dark *));

@plugin "tailwindcss-animate";

So, it works now.

Ccry11 Jan 29, 2025

@bangonkali have you removed the postcss.config.js file and the postcss package file in the package.json ?

shariq-yousuf Feb 1, 2025

Okay, as it turns out, in order for my previous issue to work, i had to add back the three @tailwind lines below as per #4677 (comment):
@import "tailwindcss";

/* Make sure these exists! */
@tailwind base;
@tailwind components;
@tailwind utilities;

@variant dark (&:where(.dark, .dark *));

@plugin "tailwindcss-animate";
So, it works now.

I have add these lines but now I am facing this error:

'@tailwind base' is no longer available in v4. Use '@import "tailwindcss/preflight"' instead.
'@tailwind components' is no longer available in v4. Use '@tailwind utilities' instead.

govindpvenu · 2025-01-23T10:13:08Z

govindpvenu
Jan 23, 2025

Tailwind CSS v.4 has released so.... 👀

0 replies

rohit-yadavv · 2025-01-23T15:54:48Z

rohit-yadavv
Jan 23, 2025

Tailwind CSS v4 is out!
Does Shadcn support it yet?

1 reply

patgpt Jan 27, 2025

The CLI won't initialize unless a Tailwind CSS v3 configuration file and the necessary imports in global.css are present. However, once the setup is complete, you can safely remove these elements from the project, and everything will continue to function as expected.

JohnC0de · 2025-01-23T15:57:40Z

JohnC0de
Jan 23, 2025

Atleast update the docs page to bun add -D tailwindcss@3 postcss autoprefixer...
Solves the some of the problems until the update comes out

0 replies

daveycodez · 2025-01-23T22:40:21Z

daveycodez
Jan 23, 2025

Would love to see a detailed writeup on using Shadcn with Tailwind 4, what implications are, is it too soon for production, best practices and upgrade guide, etc. Hoping to have full out of the box support for React 19 and Tailwind 4 asap

0 replies

firxworx · 2025-01-24T01:26:46Z

firxworx
Jan 24, 2025

Thanks to everyone who provided solutions in this thread.

The current docs over dark mode / dark theme and provide an example that overrides the built-in dark based on prefers-color-scheme using a @custom-variant:

@custom-variant dark (&:where(.dark, .dark *));

https://tailwindcss.com/docs/dark-mode

0 replies

Crsk · 2025-01-24T01:57:01Z

Crsk
Jan 24, 2025

To style a component you could use Tailwind’s utility classes

<span className="bg-white text-rose-600 dark:bg-black dark:text-rose-300">kgaeluiwfkn</span>

shadcn-ui does the same through CSS variables

<span className="bg-background text-destructive">kgaeluiwfkn</span>

In Tailwind v4, custom utility classes are managed directly in CSS, here’s the setup explanation:

@import "tailwindcss";

// to use manual theme toggling. See https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually
@variant dark (&:where(.dark, .dark *));

// declaration-only, value is asigned later in :root or .dark
// `inline` to use the variable value instead of its reference, to avoid buggy behavior. See https://tailwindcss.com/docs/theme#referencing-other-variables
@theme inline {
  --color-background: var(--background); // --background is assigned later
  --color-foreground: var(--foreground);
}

@layer base {
  // light values
  :root {
    --background: #f4f5f6; // assigned here
    --destructive: var(--color-rose-600);
  }
  
  // dark values
  .dark {
    --background: hsl(225, 8%, 10%); // and also here
    --destructive: oklch(72.06% 0.2214 26.17);
  }
}

The rest is migrating all your codebase from v3 to v4, just follow the migration guide.

In short, the command npx @tailwindcss/upgrade@next will do the hard work for you

0 replies

arkabhowmik · 2025-01-25T05:52:21Z

arkabhowmik
Jan 25, 2025

This is what worked for me -

Environment -
Next.js - 15.1.5
React - 15.0
React-dom - 15.0
Tailwindcss - 4.0

Steps to make the Shadcn CLI work -
Create a empty tailwind.config.ts at the root of your project
Copy these to your globals.css file (in my case its not at src/app/globals.css instead at src/app/(frontend)/globals.css)

@tailwind base; @tailwind components; @tailwind utilities;

In my globals.css I also have the @import "tailwindcss"; as suggested in tailwind website installation guide. So, it looks like,

`
@tailwind base;
@tailwind components;
@tailwind utilities;

@import "tailwindcss";
`

Now run pnpm dlx shadcn@latest init and it should work hopefully.

My CLI response -

`
~ pnpm dlx shadcn@latest init
✔ Preflight checks.
✔ Verifying framework. Found Next.js.
✔ Validating Tailwind CSS.
✔ Validating import alias.
✔ Which style would you like to use? › New York
✔ Which color would you like to use as the base color? › Zinc
✔ Would you like to use CSS variables for theming? … no / yes
✔ Writing components.json.
✔ Checking registry.
✔ Updating tailwind.config.ts
✔ Updating src/app/(frontend)/globals.css
✔ Installing dependencies.
ℹ Updated 1 file:

src/lib/utils.ts

Success! Project initialization completed.
You may now add components.
`

4 replies

daveycodez Jan 25, 2025

I don't think this method patches the shadcn components? Try running npx @tailwindcss/upgrade@next it should update all of the components in the ui folder that have old classes

arkabhowmik Jan 25, 2025

@daveycodez you are right. Its throwing an error

Error: Cannot apply unknown utility class: border-border

So, I commented the following from the globals.css file.

@layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } }

It working now, without the zinc theme applied.

arkabhowmik Jan 25, 2025

This fixed the theme not applied issue for me.

#2996 (comment)

Selenuix Jan 30, 2025

You should also add the import alias step, otherwise it just throws: No import alias found in your tsconfig.json file

yeasin2002 · 2025-01-25T15:45:02Z

yeasin2002
Jan 25, 2025

somehow I did, you can check out my starter.

Link: https://github.com/yeasin2002/react-ts-starter

0 replies

Bashirofficial · 2025-01-27T15:31:54Z

Bashirofficial
Jan 27, 2025

Can someone help me as I am unable to upgrade my old vite React with tailwind css v3 to tailwind css v4 by using the below command:

npx @tailwindcss/upgrade@next

The terminal output screenshot:

Similar error is being given to all of my projects while migrating from old version to newer tailwind css v4. Even though tailwind.config.js is in root folder in older version but still showing Could not load the configuration file.

I'd appreciate it if anyone could provide some leads........

1 reply

Crsk Jan 27, 2025

When I migrated I remember just commenting tailwind.config.ts to avoid errors and proceed to move the variables to my global css manually, the migration command is mostly to update utility classes in your whole codebase, eg shadow-sm becomes shadow-xs

Frost7994 · 2025-01-27T17:13:35Z

Frost7994
Jan 27, 2025

Has there been any success with this?

0 replies

saimaneim · 2025-01-27T18:35:48Z

saimaneim
Jan 27, 2025

In my case I used the manual installation of Shadcn and in my CSS file I placed this

@import 'tailwindcss';

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}




@variant dark (&:where(.dark, .dark *));

@plugin "tailwindcss-animate";

@theme {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);
}

@layer base {
  :root {
    --background: var(--color-neutral-50);
    --foreground: var(--color-neutral-900);
    --card: hsl(0 0% 100%);
    --card-foreground: hsl(0 0% 3.9%);
    --popover: hsl(0 0% 100%);
    --popover-foreground: hsl(0 0% 3.9%);
    --primary: hsl(0 0% 9%);
    --primary-foreground: hsl(0 0% 98%);
    --secondary: hsl(0 0% 96.1%);
    --secondary-foreground: hsl(0 0% 9%);
    --muted: hsl(0 0% 96.1%);
    --muted-foreground: hsl(0 0% 45.1%);
    --accent: hsl(0 0% 96.1%);
    --accent-foreground: hsl(0 0% 9%);
    --destructive: hsl(0 84.2% 60.2%);
    --destructive-foreground: hsl(0 0% 98%);
    --border: hsl(0 0% 89.8%);
    --input: hsl(0 0% 89.8%);
    --ring: hsl(0 0% 3.9%);
    --chart-1: hsl(12 76% 61%);
    --chart-2: hsl(173 58% 39%);
    --chart-3: hsl(197 37% 24%);
    --chart-4: hsl(43 74% 66%);
    --chart-5: hsl(27 87% 67%);
    --radius: 0.5rem;
  }
  .dark {
    --background: var(--color-neutral-950);
    --foreground: var(--color-neutral-100);
    --card: hsl(0, 0%, 3.9%);
    --card-foreground: hsl(0 0% 98%);
    --popover: hsl(0 0% 3.9%);
    --popover-foreground: hsl(0 0% 98%);
    --primary: hsl(0 0% 98%);
    --primary-foreground: hsl(0 0% 9%);
    --secondary: hsl(0 0% 14.9%);
    --secondary-foreground: hsl(0 0% 98%);
    --muted: hsl(0 0% 14.9%);
    --muted-foreground: hsl(0 0% 63.9%);
    --accent: hsl(0 0% 14.9%);
    --accent-foreground: hsl(0 0% 98%);
    --destructive: hsl(0 62.8% 30.6%);
    --destructive-foreground: hsl(0 0% 98%);
    --border: hsl(0 0% 14.9%);
    --input: hsl(0 0% 14.9%);
    --ring: hsl(0 0% 83.1%);
    --chart-1: hsl(220 70% 50%);
    --chart-2: hsl(160 60% 45%);
    --chart-3: hsl(30 80% 55%);
    --chart-4: hsl(280 65% 60%);
    --chart-5: hsl(340 75% 55%);
  }
}

/* Animation keyframes can be added here if needed */
@layer utilities {
  .animate-accordion-down {
    animation: accordion-down 0.2s ease-out;
  }
  .animate-accordion-up {
    animation: accordion-up 0.2s ease-out;
  }
}

@keyframes accordion-down {
  from {
    height: 0;
  }
  to {
    height: var(--radix-accordion-content-height);
  }
}

@keyframes accordion-up {
  from {
    height: var(--radix-accordion-content-height);
  }
  to {
    height: 0;
  }
}

and add the components in the normal way
pd: I'm using vite.js, React, Typescript, SWC, and Bun

0 replies

ibrahim-omer-621 · 2025-01-29T10:56:36Z

ibrahim-omer-621
Jan 29, 2025

Any update?

1 reply

saimaneim Feb 1, 2025

this: #2996 (comment)

kerryj89 · 2025-01-29T14:24:11Z

kerryj89
Jan 29, 2025

Seems shadcn is migrating to TW4 in another repo: https://github.com/shadcn/app-tailwind-v4

https://github.com/shadcn/app-tailwind-v4/blob/main/app/globals.css

1 reply

daveycodez Jan 29, 2025

Nice find! Hopefully we can get official instructions and guidance in the docs soon 🙏🏼

marketsystems · 2025-01-30T13:16:23Z

marketsystems
Jan 30, 2025

Love how the most relied upon libraries are always the last to do anything about compatibility with other most relied upon libraries :D

0 replies

signal451 · 2025-02-01T09:22:39Z

signal451
Feb 1, 2025

Oh boi I ain't using tailwind v4 until shadcn upgrades into v4 lol

5 replies

saimaneim Feb 2, 2025

look this #2996 (comment)

brielov Feb 2, 2025

Does not work with the sidebar.

mrkpatchaa Feb 2, 2025

And it's coming soon...
Check his post on X

marketsystems Feb 3, 2025

Does not work with the sidebar.

Works if you use the code from https://github.com/shadcn/app-tailwind-v4

I used the modified globals.css and the components/ui/sidebar file from there

Some messing about is still required, im sure new components will be available soon though

befabry Feb 8, 2025

look this #2996 (comment)

I don't know much about shadcn nor tailwindcss, however I am a seasoned node dev.

I got the same file as this one using the Upgrade guide. It pretty much did everything alone with the command npx @tailwindcss/upgrade@next

And the command npx shadcn@canary init seems to have worked

Demigoddd · 2025-02-04T12:18:11Z

Demigoddd
Feb 4, 2025

When approximately we expect the component update? Who knows?

2 replies

el-frontend Feb 4, 2025

I see a lot of work in progress in this repo: https://github.com/shadcn/app-tailwind-v4. Maybe soon.

subodhpareek18 Feb 5, 2025

#6567

AurelianSpodarec · 2025-02-07T14:02:54Z

AurelianSpodarec
Feb 7, 2025

How do you even disable the CSS? I got my own better desing system that I will put on shadcn components anyway.

I can't install JS code because CSS that I don't want fails...

Anyone got a solution for that? I tried to put "null" for css but then it won't work.

I guess gonna have to manually create all folders - so much for CLI.

2 replies

subodhpareek18 Feb 8, 2025

Why not use radix or react-aria directly for your use case? If you're not looking for the css then headless components are a better fit, thats what shadcn also does

AurelianSpodarec Mar 5, 2025

ShadCN does a lot more than that.

Either way, it seems like with the new update it doesn't do that anymore - its exactly as it was before so all good.

hassanedelbi · 2025-02-07T20:45:50Z

hassanedelbi
Feb 7, 2025

you can use the canary one
working fine for me
pnpm dlx shadcn@canary init

0 replies

kekzploit · 2025-02-08T21:21:11Z

Uh oh!

Shadcn/ui upgrade to Tailwindcss v.4 #2996

Uh oh!

Replies: 26 comments · 33 replies

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Replies: 26 comments 33 replies