Migrate from Windi to Tailwind (#4614)

Co-authored-by: Robert Kaussow <mail@thegeeklab.de>

.gitpod.yml

@@ -112,7 +112,7 @@ vscode:
     - 'EditorConfig.EditorConfig'
     - 'dbaeumer.vscode-eslint'
     - 'esbenp.prettier-vscode'
-    - 'voorjaar.windicss-intellisense'
+    - 'bradlc.vscode-tailwindcss'
     - 'Vue.volar'
     - 'redhat.vscode-yaml'
     - 'davidanson.vscode-markdownlint'

.vscode/extensions.json

@@ -5,7 +5,7 @@
     "EditorConfig.EditorConfig",
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
-    "voorjaar.windicss-intellisense",
+    "bradlc.vscode-tailwindcss",
     "Vue.volar",
     "redhat.vscode-yaml",
     "davidanson.vscode-markdownlint",

.yamllint.yaml

@@ -6,6 +6,7 @@ ignore-from-file:
   - .gitignore
   - server/store/datastore/migration/test-files/.gitignore
   - web/.gitignore
+  - web/.yamlignore
 
 rules:
   line-length: disable

docs/docs/92-development/03-ui.md

@@ -21,9 +21,9 @@ The following list contains some tools and frameworks used by the Woodpecker UI.
   - use `setup` and composition api
   - place (re-usable) components in `web/src/components/`
   - views should have a route in `web/src/router.ts` and are located in `web/src/views/`
-- [Windicss](https://windicss.org/) (similar to Tailwind)
-  - use Windicss classes where possible
-  - if needed extend the Windicss config to use new classes
+- [Tailwind CSS](https://tailwindcss.com/)
+  - use Tailwind classes where possible
+  - if needed extend the Tailwind config to use new classes
   - classes are sorted following the [prettier tailwind sort plugin](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier)
 - [Vite](https://vitejs.dev/) (similar to Webpack)
 - [Typescript](https://www.typescriptlang.org/)

web/.yamlignore

@@ -0,0 +1 @@
+.pnpm-lock.yaml

web/package.json

@@ -20,32 +20,39 @@
   "dependencies": {
     "@kyvg/vue3-notification": "^3.4.1",
     "@mdi/js": "^7.4.47",
-    "@vueuse/core": "^12.2.0",
+    "@tailwindcss/postcss": "4.0.0-beta.8",
+    "@tailwindcss/typography": "^0.5.15",
+    "@tailwindcss/vite": "4.0.0-beta.8",
+    "@vueuse/core": "^12.3.0",
     "ansi_up": "^6.0.2",
+    "autoprefixer": "^10.4.20",
     "dompurify": "^3.2.3",
     "fuse.js": "^7.0.0",
     "js-base64": "^3.7.7",
     "lodash": "^4.17.21",
-    "marked": "^15.0.4",
+    "marked": "^15.0.5",
     "node-emoji": "^2.2.0",
     "pinia": "^2.3.0",
+    "postcss": "^8.4.49",
     "prettier-plugin-tailwindcss": "^0.6.9",
     "prismjs": "^1.29.0",
     "semver": "^7.6.3",
-    "simple-icons": "^14.0.0",
+    "simple-icons": "^14.1.0",
+    "tailwindcss": "^3.4.17",
+    "textlint": "^14.4.2",
     "vue": "^3.5.13",
-    "vue-i18n": "^11.0.0",
+    "vue-i18n": "^11.0.1",
     "vue-router": "^4.5.0"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^3.12.1",
     "@eslint/js": "^9.17.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.4.0",
     "@intlify/eslint-plugin-vue-i18n": "3.2.0",
-    "@intlify/unplugin-vue-i18n": "^6.0.2",
+    "@intlify/unplugin-vue-i18n": "^6.0.3",
     "@types/eslint__js": "^8.42.3",
-    "@types/lodash": "^4.17.13",
-    "@types/node": "^22.10.2",
+    "@types/lodash": "^4.17.14",
+    "@types/node": "^22.10.5",
     "@types/prismjs": "^1.26.5",
     "@types/semver": "^7.5.8",
     "@types/tinycolor2": "^1.4.6",
@@ -58,14 +65,13 @@
     "jsdom": "^25.0.1",
     "prettier": "^3.4.2",
     "tinycolor2": "^1.6.0",
+    "ts-node": "^10.9.2",
     "typescript": "5.7.2",
-    "vite": "^6.0.5",
+    "vite": "^6.0.7",
     "vite-plugin-prismjs": "^0.0.11",
-    "vite-plugin-windicss": "^1.9.4",
     "vite-svg-loader": "^5.1.0",
     "vitest": "^2.1.8",
-    "vue-tsc": "^2.2.0",
-    "windicss": "^3.5.6"
+    "vue-tsc": "^2.2.0"
   },
   "pnpm": {
     "overrides": {