chore: migrate to tailwind 4 beta

Author: lishaduck

.vscode/extensions.json

@@ -12,6 +12,7 @@
     "tauri-apps.tauri-vscode",
     "rust-lang.rust-analyzer",
     "vitest.explorer",
-    "inlang.vs-code-extension"
+    "inlang.vs-code-extension",
+    "bradlc.vscode-tailwindcss"
   ]
 }

.vscode/settings.json

@@ -14,7 +14,15 @@
       "front_matter_title": ""
     }
   },
-  "cSpell.words": ["fontawesome", "fortawesome", "pathfinding", "Xmark"],
+  "cSpell.enabledFileTypes": {
+    "*": true,
+    "javascript": false,
+    "typescript": false,
+    "svelte": false
+  },
+  "files.associations": {
+    "*.css": "tailwindcss"
+  },
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit",
     "source.sortImports": "never"

apps/petal-notes/package.json

@@ -32,21 +32,20 @@
     "@sveltejs/adapter-static": "^3.0.8",
     "@sveltejs/kit": "^2.16.0",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
-    "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.10",
     "@tailwindcss/typography": "^0.5.16",
+    "@tailwindcss/vite": "4.0.0-beta.9",
     "@total-typescript/ts-reset": "^0.6.1",
     "@vitest/browser": "^3.0.2",
     "@vitest/coverage-v8": "^3.0.2",
-    "autoprefixer": "^10.4.20",
     "chromatic": "^11.25.0",
     "deputy": "workspace:^",
     "eslint": "^9.18.0",
     "jiti": "^2.4.2",
     "storybook": "^8.5.0",
     "svelte": "^5.19.0",
     "svelte-check": "^4.1.4",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "4.0.0-beta.9",
     "typescript": "~5.7.3",
     "vite": "^6.0.7",
     "vitest": "^3.0.2",

apps/petal-notes/postcss.config.js

@@ -1,3 +1,4 @@
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
+@import "tailwindcss";
+
+@plugin '@tailwindcss/typography';
+@plugin '@tailwindcss/forms';

apps/petal-notes/src/app.css

@@ -1,5 +1,6 @@
 import { storybookTest } from "@storybook/experimental-addon-test/vitest-plugin";
 import { sveltekit } from "@sveltejs/kit/vite";
+import tailwindcss from "@tailwindcss/vite";
 import * as path from "node:path";
 import {
   coverageConfigDefaults,
@@ -8,7 +9,16 @@ import {
 } from "vitest/config";
 
 export default defineConfig({
-  plugins: [sveltekit()],
+  plugins: [sveltekit(), tailwindcss()],
+
+  build: {
+    cssMinify: "lightningcss",
+    sourcemap: true,
+  },
+
+  css: {
+    transformer: "lightningcss",
+  },
 
   // Tell Vitest to use the `browser` entry points in `package.json` files, even though it's running in Node
   resolve: {

apps/petal-notes/tailwind.config.ts

@@ -8,11 +8,7 @@
       "ignoreDependencies": ["deputy"]
     },
     "apps/petal-notes": {
-      "ignore": [
-        ".storybook/vitest.setup.ts",
-        "eslint.config.ts",
-        "postcss.config.js"
-      ],
+      "ignore": [".storybook/vitest.setup.ts", "eslint.config.ts"],
       "ignoreDependencies": [
         "@tailwindcss/forms",
         "@tailwindcss/typography",