feat(cli): add ability to keep using tailwind v3

.changeset/pole-comfort-active.md

@@ -0,0 +1,5 @@
+---
+'@builder.io/qwik': patch
+---
+
+✨ Ability to keep using tailwind v3 through the cli

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

@@ -0,0 +1,71 @@
+---
+title: Tailwind | Integrations
+keywords: 'styles, styling'
+contributors:
+  - manucorporat
+  - leifermendez
+  - reemardelarosa
+  - mhevery
+  - nickclark
+  - igorbabko
+  - Benny-Nottonson
+  - mrhoodz
+  - NickClark
+  - adamdbradley
+  - sreeisalso
+  - maiieul
+updated_at: '2025-03-08T18:53:23Z'
+created_at: '2023-04-06T21:28:28Z'
+---
+
+import PackageManagerTabs from '~/components/package-manager-tabs/index.tsx';
+
+# Tailwind
+Tailwind is a CSS framework that provides us with single-purpose utility classes which are
+opinionated for the most part, and which help us design our web pages from right inside our
+markup or `.js/.jsx/.ts/.tsx/.mdx` files. [Tailwindcss Website](https://tailwindcss.com/)
+## Usage
+You can add Tailwind easily by using the following Qwik starter script:
+<PackageManagerTabs>
+<span q:slot="pnpm">
+```shell
+pnpm run qwik add tailwind-v3
+```
+</span>
+<span q:slot="npm">
+```shell
+npm run qwik add tailwind-v3
+```
+</span>
+<span q:slot="yarn">
+```shell
+yarn run qwik add tailwind-v3
+```
+</span>
+<span q:slot="bun">
+```shell
+bun run qwik add tailwind-v3
+```
+</span>
+</PackageManagerTabs>
+
+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;
+
+...stuff...
+```

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

@@ -13,7 +13,8 @@ contributors:
   - NickClark
   - adamdbradley
   - sreeisalso
-updated_at: '2025-01-24T18:53:23Z'
+  - maiieul
+updated_at: '2025-03-08T18:53:23Z'
 created_at: '2023-04-06T21:28:28Z'
 ---
 
@@ -25,9 +26,11 @@ Tailwind is a CSS framework that provides us with single-purpose utility classes
 opinionated for the most part, and which help us design our web pages from right inside our
 markup or `.js/.jsx/.ts/.tsx/.mdx` files. [Tailwindcss Website](https://tailwindcss.com/)
 
+> This page contains updated instructions for tailwind v4. If you need to use tailwind v3, you can find the relevant documentation [here](/docs/integrations/tailwind-v3).
+
 ## Usage
 
-You can add Tailwind easily by using the following Qwik starter script:
+You can add Tailwind v4 easily by using the following Qwik starter script:
 
 <PackageManagerTabs>
 <span q:slot="pnpm">
@@ -53,7 +56,7 @@ bun run qwik add tailwind
 </PackageManagerTabs>
 
 The previous command updates your app with the necessary dependencies,
-and modifies following files
+and modifies the following files
 
 ```css title="src/global.css"
 

starters/README.md

@@ -1,47 +1,30 @@
 # Starters
 
-This folder stores "starter" projects for the CLI. The idea is that during the CLI execution, the developer can choose a particular starter app and combine it with a specific server and features.
+This folder stores "starter" projects for the cli. The idea is that during the cli execution, the developer can choose a particular starter app and combine it with a specific server and features.
 
 All starters are based on `starters/apps/base`, including the `package.json` and `tsconfig.json`. Depending on the options the user selects, their starter merges into the `base` app.
 
 ## Developer
 
-Here are steps to try out the CLI in a local environment.
+Here are steps to try out the cli in a local environment.
 
-1. Build CLI:
+1. Build the cli:
 
-   ```
-   # pnpm build.cli
-   ```
-
-1. Run CLI:
-
-   ```
-   # node ./packages/create-qwik/dist/create-qwik.cjs
-   💫 Let's create a Qwik project 💫
-
-   ✔ Project name … todo-express
-   ✔ Select a starter › Todo
-   ✔ Select a server › Express
+```zsh
+pnpm build.cli
+```
 
-   ⭐️ Success! Project saved in todo-express directory
+2. Run the cli:
 
-   📟 Next steps:
-   cd todo-express
-   npm install
-   npm start
-   ```
+```zsh
+pnpm cli.qwik
+```
 
-1. Change to generated location
-   ```
-   cd todo-express
-   npm install
-   npm start
-   ```
+> If you want to test the cli on consumer repository, you can `pnpm link.dist` on the qwik monorepo, then `pnpm link --global @builder.io/qwik` on the consumer project, and finally run the cli from there.
 
-## Publishing `create-qwik` CLI Package
+## Publishing `create-qwik` cli Package
 
-The starter CLI is published at the same time as `@builder.io/qwik`. When published, the CLI will update the `base` app's package.json to point to the published version of Qwik.
+The starter cli is published at the same time as `@builder.io/qwik`. When published, the cli will update the `base` app's package.json to point to the published version of Qwik.
 
 The base app's package.json's devDependencies are updated with:
 

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

@@ -0,0 +1,3 @@
+{
+  "css.lint.unknownAtRules": "ignore"
+}

starters/features/tailwind-v3/package.json

@@ -0,0 +1,21 @@
+{
+  "description": "Use Tailwind v3 in your Qwik app",
+  "__qwik__": {
+    "displayName": "Integration: Tailwind v3 (styling)",
+    "priority": -10,
+    "viteConfig": {},
+    "docs": [
+      "https://qwik.dev/integrations/integration/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.17"
+  }
+}

starters/features/tailwind-v3/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

starters/features/tailwind-v3/src/global.css

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

starters/features/tailwind-v3/tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

starters/features/tailwind/package.json

@@ -1,7 +1,7 @@
 {
-  "description": "Use Tailwind in your Qwik app",
+  "description": "Use Tailwind v4 in your Qwik app",
   "__qwik__": {
-    "displayName": "Integration: Tailwind (styling)",
+    "displayName": "Integration: Tailwind v4 (styling)",
     "priority": -10,
         "viteConfig": {
             "imports": [