Migrate from Windi to Tailwind

.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/pnpm-lock.yaml
 
 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
 - [Vite](https://vitejs.dev/) (similar to Webpack)
 - [Typescript](https://www.typescriptlang.org/)
   - avoid using `any` and `unknown` (the linter will prevent you from doing so anyways :wink:)

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "tailwindcss": "^3.4.17"
+  }
+}

web/package.json

@@ -21,18 +21,24 @@
     "@intlify/unplugin-vue-i18n": "^6.0.0",
     "@kyvg/vue3-notification": "^3.2.1",
     "@mdi/js": "^7.4.47",
+    "@tailwindcss/postcss": "4.0.0-beta.8",
+    "@tailwindcss/typography": "^0.5.15",
+    "@tailwindcss/vite": "4.0.0-beta.8",
     "@vueuse/core": "^12.0.0",
     "ansi_up": "^6.0.2",
+    "autoprefixer": "^10.4.20",
     "dompurify": "^3.2.0",
     "fuse.js": "^7.0.0",
     "js-base64": "^3.7.7",
     "lodash": "^4.17.21",
     "marked": "^15.0.0",
     "node-emoji": "^2.1.3",
     "pinia": "^2.2.1",
+    "postcss": "^8.4.49",
     "prismjs": "^1.29.0",
     "semver": "^7.6.3",
     "simple-icons": "^13.5.0",
+    "tailwindcss": "^3.4.17",
     "vue": "^3.4.38",
     "vue-i18n": "^10.0.3",
     "vue-router": "^4.4.3"
@@ -57,14 +63,14 @@
     "jsdom": "^25.0.0",
     "prettier": "^3.3.3",
     "tinycolor2": "^1.6.0",
+    "ts-node": "^10.9.2",
     "typescript": "5.6.3",
     "vite": "^6.0.0",
     "vite-plugin-prismjs": "^0.0.11",
     "vite-plugin-windicss": "^1.9.3",
     "vite-svg-loader": "^5.1.0",
     "vitest": "^2.0.5",
-    "vue-tsc": "^2.0.29",
-    "windicss": "^3.5.6"
+    "vue-tsc": "^2.0.29"
   },
   "pnpm": {
     "overrides": {