Skip to content

Commit d297d3e

Browse files
maiieulmaiieul
authored
feat(cli): add ability to keep using tailwind v3 (#7403)
1 parent d0884d6 commit d297d3e

File tree

10 files changed

+142
-35
lines changed

10 files changed

+142
-35
lines changed

‎.changeset/pole-comfort-active.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@builder.io/qwik': patch
3+
---
4+
5+
✨ Ability to keep using tailwind v3 through the cli

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

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
---
2+
title: Tailwind | Integrations
3+
keywords: 'styles, styling'
4+
contributors:
5+
- manucorporat
6+
- leifermendez
7+
- reemardelarosa
8+
- mhevery
9+
- nickclark
10+
- igorbabko
11+
- Benny-Nottonson
12+
- mrhoodz
13+
- NickClark
14+
- adamdbradley
15+
- sreeisalso
16+
- maiieul
17+
updated_at: '2025-03-08T18:53:23Z'
18+
created_at: '2023-04-06T21:28:28Z'
19+
---
20+
21+
import PackageManagerTabs from '~/components/package-manager-tabs/index.tsx';
22+
23+
# Tailwind
24+
Tailwind is a CSS framework that provides us with single-purpose utility classes which are
25+
opinionated for the most part, and which help us design our web pages from right inside our
26+
markup or `.js/.jsx/.ts/.tsx/.mdx` files. [Tailwindcss Website](https://tailwindcss.com/)
27+
## Usage
28+
You can add Tailwind easily by using the following Qwik starter script:
29+
<PackageManagerTabs>
30+
<span q:slot="pnpm">
31+
```shell
32+
pnpm run qwik add tailwind-v3
33+
```
34+
</span>
35+
<span q:slot="npm">
36+
```shell
37+
npm run qwik add tailwind-v3
38+
```
39+
</span>
40+
<span q:slot="yarn">
41+
```shell
42+
yarn run qwik add tailwind-v3
43+
```
44+
</span>
45+
<span q:slot="bun">
46+
```shell
47+
bun run qwik add tailwind-v3
48+
```
49+
</span>
50+
</PackageManagerTabs>
51+
52+
The previous command updates your app with the necessary dependencies.
53+
54+
It also adds new files to your project folder:
55+
56+
- `postcss.config.js`
57+
- `tailwind.config.js`
58+
- `.vscode/settings.json`
59+
60+
and modifies your `src/global.css` to include
61+
62+
```css title="src/global.css"
63+
64+
# global.css file
65+
66+
@tailwind base;
67+
@tailwind components;
68+
@tailwind utilities;
69+
70+
...stuff...
71+
```

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ contributors:
1313
- NickClark
1414
- adamdbradley
1515
- sreeisalso
16-
updated_at: '2025-01-24T18:53:23Z'
16+
- maiieul
17+
updated_at: '2025-03-08T18:53:23Z'
1718
created_at: '2023-04-06T21:28:28Z'
1819
---
1920

@@ -25,9 +26,11 @@ Tailwind is a CSS framework that provides us with single-purpose utility classes
2526
opinionated for the most part, and which help us design our web pages from right inside our
2627
markup or `.js/.jsx/.ts/.tsx/.mdx` files. [Tailwindcss Website](https://tailwindcss.com/)
2728

29+
> 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).
30+
2831
## Usage
2932

30-
You can add Tailwind easily by using the following Qwik starter script:
33+
You can add Tailwind v4 easily by using the following Qwik starter script:
3134

3235
<PackageManagerTabs>
3336
<span q:slot="pnpm">
@@ -53,7 +56,7 @@ bun run qwik add tailwind
5356
</PackageManagerTabs>
5457

5558
The previous command updates your app with the necessary dependencies,
56-
and modifies following files
59+
and modifies the following files
5760

5861
```css title="src/global.css"
5962

‎starters/README.md

Lines changed: 13 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,30 @@
11
# Starters
22

3-
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.
3+
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.
44

55
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.
66

77
## Developer
88

9-
Here are steps to try out the CLI in a local environment.
9+
Here are steps to try out the cli in a local environment.
1010

11-
1. Build CLI:
11+
1. Build the cli:
1212

13-
```
14-
# pnpm build.cli
15-
```
16-
17-
1. Run CLI:
18-
19-
```
20-
# node ./packages/create-qwik/dist/create-qwik.cjs
21-
💫 Let's create a Qwik project 💫
22-
23-
✔ Project name … todo-express
24-
✔ Select a starter › Todo
25-
✔ Select a server › Express
13+
```zsh
14+
pnpm build.cli
15+
```
2616

27-
⭐️ Success! Project saved in todo-express directory
17+
2. Run the cli:
2818

29-
📟 Next steps:
30-
cd todo-express
31-
npm install
32-
npm start
33-
```
19+
```zsh
20+
pnpm cli.qwik
21+
```
3422

35-
1. Change to generated location
36-
```
37-
cd todo-express
38-
npm install
39-
npm start
40-
```
23+
> 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.
4124
42-
## Publishing `create-qwik` CLI Package
25+
## Publishing `create-qwik` cli Package
4326

44-
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.
27+
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.
4528

4629
The base app's package.json's devDependencies are updated with:
4730

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"css.lint.unknownAtRules": "ignore"
3+
}

‎starters/features/tailwind-v3/package.json

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"description": "Use Tailwind v3 in your Qwik app",
3+
"__qwik__": {
4+
"displayName": "Integration: Tailwind v3 (styling)",
5+
"priority": -10,
6+
"viteConfig": {},
7+
"docs": [
8+
"https://qwik.dev/integrations/integration/tailwind/",
9+
"https://tailwindcss.com/docs/utility-first"
10+
],
11+
"alwaysInRoot": [
12+
".vscode"
13+
]
14+
},
15+
"devDependencies": {
16+
"autoprefixer": "^10.4.19",
17+
"postcss": "^8.4.39",
18+
"prettier-plugin-tailwindcss": "^0.5.4",
19+
"tailwindcss": "^3.4.17"
20+
}
21+
}

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
};

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
/**
2+
* Tailwind CSS imports
3+
* View the full documentation at https://tailwindcss.com
4+
*/
5+
@tailwind base;
6+
@tailwind components;
7+
@tailwind utilities;

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/** @type {import('tailwindcss').Config} */
2+
export default {
3+
content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
4+
theme: {
5+
extend: {},
6+
},
7+
plugins: [],
8+
};

‎starters/features/tailwind/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
2-
"description": "Use Tailwind in your Qwik app",
2+
"description": "Use Tailwind v4 in your Qwik app",
33
"__qwik__": {
4-
"displayName": "Integration: Tailwind (styling)",
4+
"displayName": "Integration: Tailwind v4 (styling)",
55
"priority": -10,
66
"viteConfig": {
77
"imports": [

0 commit comments

Comments
 (0)