Installation docs out of step with Tailwind 4.0? #1036

bertday · 2025-02-12T00:01:22Z

Hello, and thank you for this awesome project!

I'm trying to use shadcn-vue but I'm running into some issues. Here's what I've tried so far:

Create new Vue project with pnpm create vue@latest
Follow Tailwind 4.0 installation docs (note: using the Vite plugin method, not PostCSS)
Follow shadcn-vue installation docs

It's confusing me a bit that the shadcn-vue docs have me install Tailwind, but using different steps than the official Tailwind docs. For example, the Tailwind docs don't mention autoprefixer, but the shadcn-vue docs do. Also shadcn-vue says to install Tailwind as a dev dependency, while the Tailwind docs do not. I'm not sure which method I should be using to install Tailwind.

I would be happy to help with a PR to update the documentation to make it a bit more in sync with Tailwind, and friendlier for beginners!

The text was updated successfully, but these errors were encountered:

whiteair · 2025-02-12T06:37:56Z

how did you solve this problem?
i seem to be getting a beginners error.
error when starting dev server:

Error: It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install @tailwindcss/postcss and update your PostCSS configuration.

bertday · 2025-02-12T06:40:54Z

@whiteair I wish I could help but I haven't solved it yet -- sorry!

kakauandme · 2025-02-13T20:41:06Z

Looks like Tailwind 4 is not supported yet.

mhaib · 2025-02-13T22:44:10Z

@whiteair Tailwind 4 is not yet supported, so the dependency needs to be downgraded to Tailwind 3 with tailwindcss@3

pushpan999 · 2025-02-16T04:29:20Z

Install vue with vite, and shadcn-vue as in documentation.
configure vite.config.ts

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
plugins: [
vue(),
tailwindcss(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})

You don't need tailwind.config.js in tailwindcss 4, and there are major changes in tailwind4 color variables...
Update your css to something like below to make shadcn pick the correct colors

@import "tailwindcss";
@theme {
/* Base colors */
--color-background: oklch(1 0 0);
--color-foreground: oklch(0.279 0.02 262.86);

/* Muted colors */
--color-muted: oklch(0.96 0.015 240.01);
--color-muted-foreground: oklch(0.48 0.024 262.37);

/* Card colors */
--color-card: oklch(1 0 0);
--color-card-foreground: oklch(0.279 0.02 262.86);...

since tailwind4 doesn't come with styles border, you may want to update your css to match shadcn default theme..
@layer utilities {
.border, .border-b, .border-t, .border-l, .border-r {
@apply border-gray-300;
}
}

clementmas · 2025-02-16T10:24:22Z

It looks like someone started to work on a Tailwind v4 PR: #1024

guhweb · 2025-02-17T03:30:48Z

I did what @pushpan999 mentioned and got an overwhelming result! Here I'm running [email protected] together with shadcn (although it doesn't offer official support yet).

To convert the colors from hsl to oklch format, I used the website https://oklch.com/ and got the following results.

I took into account tailwind.config.js, which would be created in the tailwind@3 format, and I simply rewrote it to the new format accepted directly in style.css.

@theme {
    --color-background: oklch(1 0 0);
    --color-foreground: oklch(0.279 0.02 262.86);

    --color-muted: oklch(0.96 0.015 240.01);
    --color-muted-foreground: oklch(0.48 0.024 262.37);

    --color-card: oklch(1 0 0);
    --color-card-foreground: oklch(0.279 0.02 262.86);

    --color-popover: oklch(0.96 0.015 240.01);
    --color-popover-foreground: oklch(0.48 0.024 262.37);

    --color-border: oklch(92.78 0.0058 264.53);
    --color-input: oklch(0.96 0.015 240.01);

    --color-primary: oklch(21.03% 0.0318 264.65);
    --color-primary-foreground: oklch(98.43% 0.0017 247.84);

    --color-secondary: oklch(96.71% 0.0029 264.54);
    --color-secondary-foreground: oklch(21.03% 0.0318 264.65);

    --color-accent: oklch(96.71% 0.0029 264.54);
    --color-accent-foreground: oklch(21.03% 0.0318 264.65);

    --color-destructive: oklch(63.68% 0.2078 25.33);
    --color-destructive-foreground: oklch(98.43% 0.0017 247.84);

    --color-ring: oklch(87.15% 0.0094 258.34);
}

@variant dark {
    --color-background: oklch(0.279 0.02 262.86);
    --color-foreground: oklch(1 0 0);

    --color-muted: oklch(27.84% 0.0296 256.85);
    --color-muted-foreground: oklch(71.37% 0.0192 261.33);

    --color-popover: oklch(12.94% 0.0273 261.67);
    --color-popover-foreground: oklch(98.43% 0.0017 247.84);

    --color-card: oklch(12.94% 0.0273 261.67);
    --color-card-foreground: oklch(98.43% 0.0017 247.84);

    --color-border: oklch(27.84% 0.0296 256.85);
    --color-input: oklch(27.84% 0.0296 256.85);

    --color-primary: oklch(98.43% 0.0017 247.84);
    --color-primary-foreground: oklch(21.03% 0.0318 264.65);

    --color-secondary: oklch(27.84% 0.0296 256.85);
    --color-secondary-foreground: oklch(98.43% 0.0017 247.84);

    --color-accent: oklch(27.84% 0.0296 256.85);
    --color-accent-foreground: oklch(98.43% 0.0017 247.84);

    --color-destructive: oklch(39.59% 0.1331 25.72);
    --color-destructive-foreground: oklch(98.43% 0.0017 247.84);

    --color-ring: oklch(87.15% 0.0094 258.34);
}

@layer utilities {
    .border, .border-b, .border-t, .border-l, .border-r {
        @apply border-gray-300;
    }
}

guhweb · 2025-02-17T04:23:29Z

Regarding keyframes and animations, you should add the following code snippet below within the @theme directive.

Note: From tailwind.config.js, it is not necessary to migrate the border radius, because they already follow the standard.

Remember to add the @plugin directive above the @theme

npm install -D tailwindcss-animate

@plugin "tailwindcss-animate";

@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
    }
}

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

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

--animate-accordion-down: accordion-down 0.2s ease-out;
--animate-accordion-up: accordion-up 0.2s ease-out;
--animate-collapsible-down: collapsible-down 0.2s ease-in-out;
--animate-collapsible-up: collapsible-up 0.2s ease-in-out;

m-shum · 2025-02-17T17:19:47Z

I did what @pushpan999 mentioned and got an overwhelming result! Here I'm running [email protected] together with shadcn (although it doesn't offer official support yet).

To convert the colors from hsl to oklch format, I used the website https://oklch.com/ and got the following results.

I took into account tailwind.config.js, which would be created in the tailwind@3 format, and I simply rewrote it to the new format accepted directly in style.css.

@theme {
--color-background: oklch(1 0 0);
--color-foreground: oklch(0.279 0.02 262.86);

--color-muted: oklch(0.96 0.015 240.01);
--color-muted-foreground: oklch(0.48 0.024 262.37);

--color-card: oklch(1 0 0);
--color-card-foreground: oklch(0.279 0.02 262.86);

--color-popover: oklch(0.96 0.015 240.01);
--color-popover-foreground: oklch(0.48 0.024 262.37);

--color-border: oklch(92.78 0.0058 264.53);
--color-input: oklch(0.96 0.015 240.01);

--color-primary: oklch(21.03% 0.0318 264.65);
--color-primary-foreground: oklch(98.43% 0.0017 247.84);

--color-secondary: oklch(96.71% 0.0029 264.54);
--color-secondary-foreground: oklch(21.03% 0.0318 264.65);

--color-accent: oklch(96.71% 0.0029 264.54);
--color-accent-foreground: oklch(21.03% 0.0318 264.65);

--color-destructive: oklch(63.68% 0.2078 25.33);
--color-destructive-foreground: oklch(98.43% 0.0017 247.84);

--color-ring: oklch(87.15% 0.0094 258.34);

}

@variant dark {
--color-background: oklch(0.279 0.02 262.86);
--color-foreground: oklch(1 0 0);

--color-muted: oklch(27.84% 0.0296 256.85);
--color-muted-foreground: oklch(71.37% 0.0192 261.33);

--color-popover: oklch(12.94% 0.0273 261.67);
--color-popover-foreground: oklch(98.43% 0.0017 247.84);

--color-card: oklch(12.94% 0.0273 261.67);
--color-card-foreground: oklch(98.43% 0.0017 247.84);

--color-border: oklch(27.84% 0.0296 256.85);
--color-input: oklch(27.84% 0.0296 256.85);

--color-primary: oklch(98.43% 0.0017 247.84);
--color-primary-foreground: oklch(21.03% 0.0318 264.65);

--color-secondary: oklch(27.84% 0.0296 256.85);
--color-secondary-foreground: oklch(98.43% 0.0017 247.84);

--color-accent: oklch(27.84% 0.0296 256.85);
--color-accent-foreground: oklch(98.43% 0.0017 247.84);

--color-destructive: oklch(39.59% 0.1331 25.72);
--color-destructive-foreground: oklch(98.43% 0.0017 247.84);

--color-ring: oklch(87.15% 0.0094 258.34);

}

@layer utilities {
.border, .border-b, .border-t, .border-l, .border-r {
@apply border-gray-300;
}
}

When you say you rewrote the TW 3 config in the new format – did you have a tailwind config js file when you added shadcn? I'm finding that shadCN adds a bunch of css of its own but since I have no tailwind config file I don't know if it's adding anything there that I'd need to move over.

m-shum · 2025-02-17T19:57:26Z

Install vue with vite, and shadcn-vue as in documentation. configure vite.config.ts

import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/ export default defineConfig({ plugins: [ vue(), tailwindcss(), ], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } } })

You don't need tailwind.config.js in tailwindcss 4, and there are major changes in tailwind4 color variables... Update your css to something like below to make shadcn pick the correct colors

@import "tailwindcss"; @theme { /* Base colors */ --color-background: oklch(1 0 0); --color-foreground: oklch(0.279 0.02 262.86);

/* Muted colors */ --color-muted: oklch(0.96 0.015 240.01); --color-muted-foreground: oklch(0.48 0.024 262.37);

/* Card colors */ --color-card: oklch(1 0 0); --color-card-foreground: oklch(0.279 0.02 262.86);...

since tailwind4 doesn't come with styles border, you may want to update your css to match shadcn default theme.. @layer utilities { .border, .border-b, .border-t, .border-l, .border-r { @apply border-gray-300; } }

@pushpan999 I might be being really dense here, but when you add the shadcn package, it initiates a components.json file with a tailwind property as follows:

  "tailwind": {
    "config": "tailwind.config.js",
    "css": "assets/css/tailwind.css",
    "baseColor": "slate",
    "cssVariables": false,
    "prefix": ""
  },

Tailwind 4 doesn't use a tailwind.config.js file – do we just replace the config property with the path to the css file where we import tailwind?
Additionally, shadcn does appear to require @nuxtjs/tailwindcss which is no longer needed for tailwind 4. Did you install this or omit it?

I'm running Nuxt so my Vite setup is a little different to what you have above.

pushpan999 · 2025-02-18T12:47:40Z

@m-shum I experimented with Nuxt, Tailwind 4, and shadcn-vue, and as you pointed out, it seems that shadcn-vue does require @nuxtjs/tailwindcss if we install in a regular way.

While I’m not entirely sure if this is the best approach, I was able to get it working using the following steps:

Install nuxt as regular npm (https://nuxt.com/docs/getting-started/installation)
Install tailwindss as instruction for nuxt framework (https://tailwindcss.com/docs/installation/framework-guides/nuxt)
Configure nuxt.config.ts as in instruction

import tailwindcss from "@tailwindcss/vite";
export default defineNuxtConfig({
compatibilityDate: "2024-11-01",
devtools: { enabled: true },
css: ['~/assets/css/main.css'],
vite: {
plugins: [
tailwindcss(),
],
},
});

Install shadcn-vue "npx shadcn-vue@latest init" - select "nuxt" as framework in installation option

orenmizr · 2025-02-27T16:09:38Z

i thought REKA is tailwind 4, is it not ? i having issues with nuxt and shadcn-vue... all the docs point to tailwind 3.

nuxt + new shadcn + tailwind 4 failed as modules and as standalone packages. if someone made a starter that works, please link here.

gkkirilov · 2025-02-28T10:32:45Z

@orenmizr Hey, they are both Tailwind 3 but Tailwind 4 migration will be easy once it comes.

Install Nuxt, then install npx nuxi@latest module add tailwindcss then install shadcn by the guide and everything works perfectly.

Will release my starter in few days.

zernonia · 2025-02-28T19:49:58Z

Hi guys. Upated the docs to install tw v3 for now.
As for v4, please follow #1076

fguisso · 2025-03-28T15:12:47Z

@zernonia how to use v3 with the nuxt installation?

bertday mentioned this issue Feb 12, 2025

Error on basic button example #1037

Closed

zernonia closed this as completed Feb 28, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Installation docs out of step with Tailwind 4.0? #1036

Installation docs out of step with Tailwind 4.0? #1036

bertday commented Feb 12, 2025

whiteair commented Feb 12, 2025

bertday commented Feb 12, 2025

kakauandme commented Feb 13, 2025

mhaib commented Feb 13, 2025

pushpan999 commented Feb 16, 2025

clementmas commented Feb 16, 2025

guhweb commented Feb 17, 2025

guhweb commented Feb 17, 2025

m-shum commented Feb 17, 2025

m-shum commented Feb 17, 2025

pushpan999 commented Feb 18, 2025

orenmizr commented Feb 27, 2025 •

edited

Loading

gkkirilov commented Feb 28, 2025

zernonia commented Feb 28, 2025

fguisso commented Mar 28, 2025

Installation docs out of step with Tailwind 4.0? #1036

Installation docs out of step with Tailwind 4.0? #1036

Comments

bertday commented Feb 12, 2025

whiteair commented Feb 12, 2025

bertday commented Feb 12, 2025

kakauandme commented Feb 13, 2025

mhaib commented Feb 13, 2025

pushpan999 commented Feb 16, 2025

clementmas commented Feb 16, 2025

guhweb commented Feb 17, 2025

guhweb commented Feb 17, 2025

m-shum commented Feb 17, 2025

m-shum commented Feb 17, 2025

pushpan999 commented Feb 18, 2025

orenmizr commented Feb 27, 2025 • edited Loading

gkkirilov commented Feb 28, 2025

zernonia commented Feb 28, 2025

fguisso commented Mar 28, 2025

orenmizr commented Feb 27, 2025 •

edited

Loading