migrate to tailwind v4-alpha

buhodev · Nov 19, 2024 · e2fe03c · e2fe03c
1 parent 24c06c3
commit e2fe03c
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 37 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
 		"@tailwindcss/container-queries": "0.1.1",
 		"@tailwindcss/forms": "0.5.9",
 		"@tailwindcss/typography": "0.5.15",
+		"@tailwindcss/vite": "4.0.0-alpha.34",
 		"@types/eslint": "9.6.1",
 		"autoprefixer": "10.4.20",
 		"eslint": "9.15.0",
@@ -36,7 +37,7 @@
 		"prettier-plugin-tailwindcss": "0.6.8",
 		"svelte": "5.2.2",
 		"svelte-check": "4.0.9",
-		"tailwindcss": "3.4.15",
+		"tailwindcss": "4.0.0-alpha.34",
 		"typescript": "5.6.3",
 		"typescript-eslint": "8.14.0",
 		"vite": "5.4.11",

diff --git a/postcss.config.js b/postcss.config.js
diff --git a/src/app.css b/src/app.css
@@ -1,6 +1,16 @@
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+@import 'tailwindcss';
+
+@plugin '@tailwindcss/forms';
+@plugin '@tailwindcss/typography';
+/* @plugin '@tailwindcss/aspect-ratio'; */
+@plugin '@tailwindcss/container-queries';
+
+@theme {
+	--font-sans: 'Inter Variable', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+	"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+	--breakpoint-xs: 475px;
+	--breakpoint-3xl: 1920px;
+}
 
 @layer base {
 	/* inter-latin-wght-normal */

diff --git a/tailwind.config.ts b/tailwind.config.ts
diff --git a/vite.config.ts b/vite.config.ts
@@ -1,7 +1,8 @@
 import { defineConfig } from 'vitest/config';
-import { paraglide } from '@inlang/paraglide-sveltekit/vite';
 import { sveltekit } from '@sveltejs/kit/vite';
+import { paraglide } from '@inlang/paraglide-sveltekit/vite';
 import svg from '@poppanator/sveltekit-svg';
+import tailwindcss from '@tailwindcss/vite';
 
 export default defineConfig({
 	plugins: [
@@ -21,7 +22,8 @@ export default defineConfig({
 					}
 				]
 			}
-		})
+		}),
+		tailwindcss()
 	],
 
 	test: {