Merge pull request #158 from objectstack-ai/copilot/upgrade-packages-to-tailwind-4

Author: hotlong

examples/designer-modes/package.json

@@ -20,6 +20,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
+    "@tailwindcss/postcss": "^4.1.18",
     "@types/node": "^25.0.9",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
@@ -30,7 +31,7 @@
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
     "postcss": "^8.5.6",
-    "tailwindcss": "^3.4.19",
+    "tailwindcss": "^4.1.18",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.4",
     "vite": "^7.3.1"

examples/designer-modes/postcss.config.js

@@ -8,7 +8,7 @@
 
 export default {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
     autoprefixer: {},
   },
 }

examples/designer-modes/src/index.css

@@ -1,6 +1,9 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+/* Scan sources for Tailwind classes */
+@source './src/**/*.{js,ts,jsx,tsx}';
+@source '../../packages/designer/src/**/*.{js,ts,jsx,tsx}';
+@source '../../packages/components/src/**/*.{js,ts,jsx,tsx}';
 
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;

examples/designer-modes/tailwind.config.js

@@ -23,6 +23,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
+    "@tailwindcss/postcss": "^4.1.18",
     "@types/node": "^25.0.9",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
@@ -33,7 +34,7 @@
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
     "postcss": "^8.5.6",
-    "tailwindcss": "^3.4.19",
+    "tailwindcss": "^4.1.18",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.4",
     "vite": "^7.3.1"

examples/object-view-demo/package.json

@@ -8,7 +8,7 @@
 
 export default {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
     autoprefixer: {},
   },
 }

examples/object-view-demo/postcss.config.js

@@ -1,6 +1,9 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+/* Scan sources for Tailwind classes */
+@source './src/**/*.{js,ts,jsx,tsx}';
+@source '../../packages/designer/src/**/*.{js,ts,jsx,tsx}';
+@source '../../packages/components/src/**/*.{js,ts,jsx,tsx}';
 
 body {
   margin: 0;

examples/object-view-demo/src/index.css

@@ -82,15 +82,16 @@
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "tailwindcss": "^3.0.0"
+    "tailwindcss": "^4.1.18"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.18",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.16",
     "postcss": "^8.4.31",
-    "tailwindcss": "^3.3.5",
+    "tailwindcss": "^4.1.18",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4"

examples/object-view-demo/tailwind.config.js

@@ -8,7 +8,7 @@
 
 export default {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
     autoprefixer: {},
   },
 }