feat: upgrade Tailwind CSS from v3 to v4

Author: camsong

package.json

@@ -38,11 +38,11 @@
     "@git-diff-view/file": "workspace:*",
     "@rollup/plugin-alias": "^5.1.1",
     "@swc/core": "^1.10.15",
+    "@tailwindcss/postcss": "^4.0.0",
     "@types/lodash": "^4.17.20",
     "@types/node": "^22.18.10",
     "@types/react": "^18.3.26",
     "@types/react-dom": "^18.3.7",
-    "autoprefixer": "^10.4.21",
     "dts-bundle-generator": "^9.5.1",
     "eslint": "^8.57.0",
     "husky": "^8.0.2",
@@ -54,7 +54,7 @@
     "prettier-plugin-tailwindcss": "^0.6.14",
     "project-tool": "https://github.com/MrWangJustToDo/project-tool.git",
     "rollup-plugin-postcss": "^4.0.2",
-    "tailwindcss": "^3.4.18",
+    "tailwindcss": "^4.0.0",
     "ts-node": "^10.9.2",
     "tslib": "^2.8.0",
     "typescript": "^5.9.3"

packages/react/package.json

@@ -76,11 +76,11 @@
     "use-sync-external-store": "^1.6.0"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.0.0",
     "@types/use-sync-external-store": "^1.5.0",
-    "autoprefixer": "^10.4.21",
     "postcss": "^8.5.6",
     "react": "^19.2.0",
-    "tailwindcss": "^3.4.18"
+    "tailwindcss": "^4.0.0"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",

packages/react/postcss.config.js

@@ -3,7 +3,7 @@ const { resolve } = require("path");
 module.exports = {
   plugins: {
     "postcss-import": {},
-    tailwindcss: { config: resolve(__dirname) + "/tailwind.config.js" },
+    "@tailwindcss/postcss": {},
     "postcss-prefix-selector": {
       prefix: ".diff-tailwindcss-wrapper",
       transform: function (prefix, selector, prefixedSelector, _filePath, rule) {
@@ -35,6 +35,5 @@ module.exports = {
         }
       },
     },
-    autoprefixer: {},
   },
 };

packages/react/src/_base.css

@@ -1,3 +1 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";

packages/react/src/_base_pure.css

@@ -1,2 +1 @@
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss/utilities";

packages/react/tailwind.config.js

@@ -49,14 +49,14 @@
     "reactivity-store": "^0.3.12"
   },
   "devDependencies": {
-    "solid-js": "^1.9.0",
-    "vite-plugin-solid": "^2.11.0",
-    "autoprefixer": "^10.4.21",
+    "@tailwindcss/postcss": "^4.0.0",
     "eslint-plugin-solid": "^0.14.5",
     "postcss": "^8.5.6",
-    "tailwindcss": "^3.4.18",
+    "solid-js": "^1.9.0",
+    "tailwindcss": "^4.0.0",
     "vite": "^5.4.20",
-    "vite-plugin-dts": "^4.5.4"
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-solid": "^2.11.0"
   },
   "peerDependencies": {
     "solid-js": "^1.9.0"

packages/solid/package.json

@@ -1,7 +1,7 @@
 export default {
   plugins: {
     "postcss-import": {},
-    tailwindcss: { config: "./tailwind.config.js" },
+    "@tailwindcss/postcss": {},
     "postcss-prefix-selector": {
       prefix: ".diff-tailwindcss-wrapper",
       transform: function (prefix, selector, prefixedSelector, _filePath, rule) {
@@ -33,6 +33,5 @@ export default {
         }
       },
     },
-    autoprefixer: {},
   },
 };

packages/solid/postcss.config.js

@@ -1,3 +1 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";

packages/solid/src/_base.css

@@ -1,2 +1 @@
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss/utilities";