chore: bump tailwindcss version to 3.4 (#7604)

#### What type of PR is this?

/area ui
/kind cleanup

#### What this PR does / why we need it:

Bump TailwindCSS version to 3.4

#### Does this PR introduce a user-facing change?

```release-note
None
```

ui/package.json

@@ -117,8 +117,8 @@
     "@iconify/json": "^2.2.343",
     "@intlify/unplugin-vue-i18n": "^6.0.8",
     "@tailwindcss/aspect-ratio": "^0.4.2",
-    "@tailwindcss/container-queries": "^0.1.0",
+    "@tailwindcss/container-queries": "^0.1.1",
-    "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/forms": "^0.5.10",
     "@tsconfig/node18": "^2.0.1",
     "@types/jsdom": "^21.1.7",
     "@types/lodash-es": "^4.17.12",
@@ -153,9 +153,8 @@
     "rollup-plugin-gzip": "^3.1.0",
     "sass-embedded": "^1.82.0",
     "start-server-and-test": "^1.14.0",
-    "tailwindcss": "^3.2.7",
+    "tailwindcss": "^3.4.17",
-    "tailwindcss-safe-area": "^0.2.2",
+    "tailwindcss-themer": "^4.1.1",
-    "tailwindcss-themer": "^2.0.3",
     "terser": "^5.37.0",
     "tsdown": "^0.12.8",
     "typescript": "~5.8.0",

ui/packages/components/package.json

@@ -2,45 +2,56 @@
   "name": "@halo-dev/components",
   "version": "2.21.0",
   "description": "",
-  "files": [
-    "dist"
-  ],
-  "main": "./dist/halo-components.iife.js",
-  "module": "./dist/halo-components.es.js",
-  "unpkg": "./dist/halo-components.iife.js",
-  "jsdelivr": "./dist/halo-components.iife.js",
-  "types": "./dist/index.d.ts",
-  "scripts": {
-    "dev": "vite build --watch",
-    "build": "vite build",
-    "test:unit": "vitest --run",
-    "test:unit:watch": "vitest --watch",
-    "test:unit:ui": "vitest --watch --ui",
-    "test:unit:coverage": "vitest run --coverage",
-    "typecheck": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
   "keywords": [
     "halo",
     "halo-components",
     "halo-dev",
     "@halo-dev/components"
   ],
-  "author": {
+  "homepage": "https://github.com/halo-dev/halo/tree/main/ui/packages/components#readme",
-    "name": "@halo-dev",
+  "bugs": {
-    "url": "https://github.com/halo-dev"
+    "url": "https://github.com/halo-dev/halo/issues"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/halo-dev/halo.git",
     "directory": "ui/packages/components"
   },
-  "bugs": {
-    "url": "https://github.com/halo-dev/halo/issues"
-  },
-  "homepage": "https://github.com/halo-dev/halo/tree/main/ui/packages/components#readme",
   "license": "MIT",
+  "author": {
+    "name": "@halo-dev",
+    "url": "https://github.com/halo-dev"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/halo-components.es.js"
+    },
+    "./dist/style.css": "./dist/style.css"
+  },
+  "main": "./dist/halo-components.iife.js",
+  "jsdelivr": "./dist/halo-components.iife.js",
+  "unpkg": "./dist/halo-components.iife.js",
+  "module": "./dist/halo-components.es.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "build-storybook": "storybook build",
+    "dev": "vite build --watch",
+    "storybook": "storybook dev -p 6006",
+    "test:unit": "vitest --run",
+    "test:unit:coverage": "vitest run --coverage",
+    "test:unit:ui": "vitest --watch --ui",
+    "test:unit:watch": "vitest --watch",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.app.json --composite false"
+  },
+  "dependencies": {
+    "floating-vue": "^5.2.2"
+  },
   "devDependencies": {
     "@storybook/addon-essentials": "^7.6.3",
     "@storybook/addon-interactions": "^7.6.3",
@@ -57,15 +68,5 @@
   "peerDependencies": {
     "vue": "^3.5.16",
     "vue-router": "^4.5.1"
-  },
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/halo-components.es.js"
-    },
-    "./dist/style.css": "./dist/style.css"
-  },
-  "dependencies": {
-    "floating-vue": "^5.2.2"
   }
 }

ui/packages/components/tailwind.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  ...require("../../tailwind.config"),
-};

ui/packages/components/tailwind.config.ts

@@ -0,0 +1,3 @@
+import tailwindConfig from "../../tailwind.config";
+
+export default tailwindConfig;

ui/packages/components/tsconfig.node.json

@@ -1,9 +1,15 @@
 {
   "extends": "@tsconfig/node18/tsconfig.json",
-  "include": ["vite.config.*", "vitest.config.*"],
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "tailwind.config.ts",
+    "../../tailwind.config.ts"
+  ],
   "compilerOptions": {
     "composite": true,
     "module": "ESNext",
+    "moduleResolution": "Bundler",
     "types": ["node"]
   }
 }

ui/packages/editor/package.json

@@ -13,6 +13,7 @@
   },
   "license": "GPL-3.0",
   "author": "@halo-dev",
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

ui/packages/editor/tailwind.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  ...require("../../tailwind.config"),
-};

ui/packages/editor/tailwind.config.ts

@@ -0,0 +1,3 @@
+import tailwindConfig from "../../tailwind.config";
+
+export default tailwindConfig;

ui/packages/editor/tsconfig.node.json

@@ -1,6 +1,10 @@
 {
   "extends": "@tsconfig/node18/tsconfig.json",
-  "include": ["vite.config.*"],
+  "include": [
+    "vite.config.*",
+    "tailwind.config.ts",
+    "../../tailwind.config.ts"
+  ],
   "compilerOptions": {
     "composite": true,
     "module": "ESNext",

ui/tailwind.config.cjs

@@ -1,43 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    "./index.html",
-    "./{src,uc-src,console-src}/**/*.{vue,js,ts,jsx,tsx}",
-    "./packages/shared/src/**/*.{vue,js,ts,jsx,tsx}",
-  ],
-  theme: {
-    extend: {
-      animation: {
-        breath: "breath 1s ease-in-out infinite",
-      },
-      keyframes: {
-        breath: {
-          "0%": { transform: "scale(1)", opacity: 0.8 },
-          "50%": { transform: "scale(1.02)", opacity: 1 },
-          "100%": { transform: "scale(1)", opacity: 0.8 },
-        },
-      },
-    },
-  },
-  plugins: [
-    require("tailwindcss-safe-area"),
-    require("@tailwindcss/aspect-ratio"),
-    require("@formkit/themes/tailwindcss"),
-    require("@tailwindcss/container-queries"),
-    require("@tailwindcss/forms"),
-    require("tailwindcss-themer")({
-      defaultTheme: {
-        extend: {
-          colors: {
-            primary: "#4CCBA0",
-            secondary: "#0E1731",
-            danger: "#D71D1D",
-          },
-          borderRadius: {
-            base: "4px",
-          },
-        },
-      },
-    }),
-  ],
-};

ui/tailwind.config.ts

@@ -0,0 +1,44 @@
+import formkit from "@formkit/themes/tailwindcss";
+import aspectRatio from "@tailwindcss/aspect-ratio";
+import containerQueries from "@tailwindcss/container-queries";
+import forms from "@tailwindcss/forms";
+import { Config } from "tailwindcss";
+import themer from "tailwindcss-themer";
+
+export default {
+  content: ["./index.html", "./{src,uc-src,console-src}/**/*.{vue,js,ts,tsx}"],
+  theme: {
+    extend: {
+      animation: {
+        breath: "breath 1s ease-in-out infinite",
+      },
+      keyframes: {
+        breath: {
+          "0%": { transform: "scale(1)", opacity: "0.8" },
+          "50%": { transform: "scale(1.02)", opacity: "1" },
+          "100%": { transform: "scale(1)", opacity: "0.8" },
+        },
+      },
+    },
+  },
+  plugins: [
+    aspectRatio,
+    formkit,
+    containerQueries,
+    forms,
+    themer({
+      defaultTheme: {
+        extend: {
+          colors: {
+            primary: "#4CCBA0",
+            secondary: "#0E1731",
+            danger: "#D71D1D",
+          },
+          borderRadius: {
+            base: "4px",
+          },
+        },
+      },
+    }),
+  ],
+} satisfies Config;

ui/tsconfig.node.json

@@ -5,12 +5,14 @@
     "vite.uc.config.ts",
     "vitest.config.*",
     "eslint.config.ts",
+    "tailwind.config.ts",
     "src/vite/library-external.ts",
     "src/vite/config-builder.ts"
   ],
   "compilerOptions": {
     "composite": true,
     "module": "ESNext",
+    "moduleResolution": "bundler",
     "types": ["node"]
   }
 }