tailwindcss upgrade from v3 to v4

Author: Discusser

components.json

@@ -1,21 +1,16 @@
 {
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
-  "rsc": false,
-  "tsx": true,
-  "tailwind": {
-    "config": "tailwind.config.ts",
-    "css": "src/app.css",
-    "baseColor": "zinc",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "aliases": {
-    "components": "$lib/components",
-    "utils": "$lib/utils",
-    "ui": "$lib/components/ui",
-    "lib": "$lib/lib",
-    "hooks": "$lib/hooks"
-  },
-  "iconLibrary": "lucide"
+	"$schema": "https://ui.shadcn.com/schema.json",
+	"tailwind": {
+		"css": "src/app.css",
+		"baseColor": "zinc"
+	},
+	"aliases": {
+		"components": "$lib/components",
+		"utils": "$lib/utils",
+		"ui": "$lib/components/ui",
+		"hooks": "$lib/hooks",
+		"lib": "$lib/lib"
+	},
+	"typescript": true,
+	"registry": "https://next.shadcn-svelte.com/registry"
 }

package.json

@@ -12,13 +12,14 @@
 		"lint": "prettier --check . && eslint ."
 	},
 	"devDependencies": {
+		"@lucide/svelte": "^0.511.0",
 		"@sveltejs/adapter-auto": "^3.3.1",
 		"@sveltejs/adapter-static": "^3.0.8",
 		"@sveltejs/kit": "^2.21.1",
 		"@sveltejs/vite-plugin-svelte": "^4.0.4",
+		"@tailwindcss/postcss": "^4.1.7",
 		"@types/eslint": "^9.6.1",
 		"@types/node": "^22.15.23",
-		"autoprefixer": "^10.4.21",
 		"bits-ui": "1.0.0-next.46",
 		"clsx": "^2.1.1",
 		"embla-carousel-svelte": "^8.6.0",
@@ -37,21 +38,21 @@
 		"svelte": "^5.33.4",
 		"svelte-check": "^4.2.1",
 		"svelte-sonner": "^0.3.28",
-		"tailwind-merge": "^2.6.0",
-		"tailwind-variants": "^0.2.1",
-		"tailwindcss": "^3.4.17",
+		"tailwind-merge": "^3.3.0",
+		"tailwind-variants": "^1.0.0",
+		"tailwindcss": "^4.1.7",
+		"tw-animate-css": "^1.3.0",
 		"typescript": "^5.8.3",
 		"typescript-eslint": "^8.33.0",
 		"vite": "^5.4.19"
 	},
 	"dependencies": {
-		"@lucide/svelte": "^0.511.0",
 		"@tabler/icons-svelte": "^3.33.0",
+		"@tailwindcss/vite": "^4.1.7",
 		"@tanstack/table-core": "^8.21.3",
 		"class-variance-authority": "^0.7.1",
 		"lucide-react": "^0.511.0",
 		"path-browserify": "^1.0.1",
-		"tailwindcss-animate": "^1.0.7",
-		"tw-animate-css": "^1.3.0"
+		"tailwindcss-animate": "^1.0.7"
 	}
 }