Upgraded to TailwindCSS 4

shadcn-vue with Tailwind v4

Author: vanlalruata

package-lock.json

@@ -34,8 +34,8 @@
         "lucide": "^0.468.0",
         "lucide-vue-next": "^0.468.0",
         "reka-ui": "^2.0.0",
-        "tailwind-merge": "^2.5.5",
-        "tailwindcss": "^3.4.1",
+        "tailwind-merge": "^3.2",
+        "tailwindcss": "^4.1",
         "tailwindcss-animate": "^1.0.7",
         "typescript": "^5.2.2",
         "vite": "^6.2.0",

package.json

@@ -1,6 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
 body,
 html {

resources/css/app.css

@@ -2,12 +2,14 @@ import vue from '@vitejs/plugin-vue';
 import autoprefixer from 'autoprefixer';
 import laravel from 'laravel-vite-plugin';
 import path from 'path';
-import tailwindcss from 'tailwindcss';
+//import tailwindcss from 'tailwindcss';
+import tailwindcss from "@tailwindcss/vite";
 import { resolve } from 'node:path';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
     plugins: [
+        tailwindcss(),
         laravel({
             input: ['resources/js/app.ts'],
             ssr: 'resources/js/ssr.ts',
@@ -30,7 +32,7 @@ export default defineConfig({
     },
     css: {
         postcss: {
-            plugins: [tailwindcss, autoprefixer],
+            plugins: [tailwindcss],
         },
     },
 });