Merge pull request #7274 from sreeisalso/tailwindv4

tailwind v4

Author: wmertens

.changeset/bright-experts-sip.md

@@ -0,0 +1,5 @@
+---
+'@builder.io/qwik': patch
+---
+
+tailwindcss v4 integration

.github/workflows/ci.yml

@@ -157,7 +157,7 @@ jobs:
             packages/eslint-plugin-qwik/dist
             packages/create-qwik/dist
           # note that all inputs need to be listed here, including qwik, for correct cache invalidation
-          key: ${{ hashfiles('qwik-key.txt', 'rust-key.txt', 'packages/qwik-city/**/*', 'packages/qwik-labs/**/*', 'packages/qwik-react/**/*', 'packages/eslint-plugin-qwik/**/*', 'packages/create-qwik/**/*', '!**/*.unit.*') }}
+          key: ${{ hashfiles('qwik-key.txt', 'rust-key.txt', 'packages/qwik-city/**/*', 'packages/qwik-labs/**/*', 'packages/qwik-react/**/*', 'packages/eslint-plugin-qwik/**/*', 'packages/create-qwik/**/*', 'starters/apps/**/*', 'starters/features/**/*', 'starters/adapters/**/*', '!**/*.unit.*') }}
       - run: 'echo ${{ steps.cache-others.outputs.cache-primary-key }} > others-key.txt'
       - name: 'check cache: docs'
         id: cache-docs

packages/docs/src/routes/docs/integrations/tailwind/index.mdx

@@ -12,7 +12,8 @@ contributors:
   - mrhoodz
   - NickClark
   - adamdbradley
-updated_at: '2023-10-03T18:53:23Z'
+  - sreeisalso
+updated_at: '2025-01-24T18:53:23Z'
 created_at: '2023-04-06T21:28:28Z'
 ---
 
@@ -53,21 +54,13 @@ bun run qwik add tailwind
 
 The previous command updates your app with the necessary dependencies.
 
-It also adds new files to your project folder:
-
-- `postcss.config.js`
-- `tailwind.config.js`
-- `.vscode/settings.json`
-
 and modifies your `src/global.css` to include
 
 ```css title="src/global.css"
 
 # global.css file
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
 ...stuff...
 

starters/features/tailwind/.vscode/settings.json

@@ -3,19 +3,25 @@
   "__qwik__": {
     "displayName": "Integration: Tailwind (styling)",
     "priority": -10,
-    "viteConfig": {},
+        "viteConfig": {
+            "imports": [
+              {
+                "defaultImport": "tailwindcss",
+                "importPath": "@tailwindcss/vite"
+              }
+            ],
+            "vitePlugins": [
+              "tailwindcss()"
+            ]
+          },
     "docs": [
-      "https://qwik.dev/integrations/integration/tailwind/",
+      "https://qwik.dev/integrations/tailwind/",
       "https://tailwindcss.com/docs/utility-first"
-    ],
-    "alwaysInRoot": [
-      ".vscode"
     ]
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.19",
-    "postcss": "^8.4.39",
-    "prettier-plugin-tailwindcss": "^0.5.4",
-    "tailwindcss": "^3.4.6"
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "tailwindcss": "^4.0.0",
+    "@tailwindcss/vite":"^4.0.0"
   }
 }

starters/features/tailwind/package.json

@@ -1,7 +1 @@
-/**
- * Tailwind CSS imports
- * View the full documentation at https://tailwindcss.com
- */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";