Skip to content

Commit 5dd181f

Browse files
mychidarkomychidarko
committed
feat: update documentation for tailwind v4
1 parent 0930615 commit 5dd181f

File tree

1 file changed

+97
-34
lines changed

1 file changed

+97
-34
lines changed

‎src/docs/frontend/tailwind.md‎

Lines changed: 97 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -4,36 +4,119 @@ Tailwind is a utility-first CSS framework that provides a set of utility classes
44

55
## Using the CLI
66

7-
You can set up Tailwind CSS in your Leaf project using the Leaf CLI. To do this, run the following command:
7+
::: warning CLI Installation
8+
9+
Tailwind 4 has been released, and it unfortunately breaks the current Leaf CLI installation. Leaf MVC works fine with Tailwind 4, but we are working on a fix for the CLI. For now, you can install Tailwind manually if you are not using Leaf MVC.
10+
11+
:::
12+
13+
You can set up Tailwind CSS in your Leaf MVC project using the php leaf console. To do this, run the following command:
814

915
::: code-group
1016

11-
```bash:no-line-numbers [Leaf CLI]
17+
<!-- ```bash:no-line-numbers [Leaf CLI]
1218
leaf view:install --tailwind
13-
```
19+
``` -->
1420

1521
```bash:no-line-numbers [Leaf MVC CLI]
1622
php leaf view:install --tailwind
1723
```
1824

1925
:::
2026

21-
This command will install Tailwind CSS and its dependencies, create a Tailwind configuration file, and set up your CSS file to import Tailwind CSS. It will also add your CSS file to Vite as an entry point.
27+
This command will install Tailwind CSS v4 and its dependencies, update your vite file, and set up your CSS file to import Tailwind CSS. It will also add your CSS file to Vite as an entry point. From there, you need to head over to your template file and make sure that you are including the CSS file.
28+
29+
```blade:no-line-numbers
30+
@vite('css/app.css')
31+
```
32+
33+
You can then restart your Leaf server and start using Tailwind CSS in your project.
34+
35+
## Manual Installation for TW v4
36+
37+
v4 is now the default version of Tailwind CSS, and it comes with a bunch of new features and improvements, but also has a different setup compared to v3. To get started, you need to install all your frontend dependencies:
38+
39+
```bash:no-line-numbers
40+
npm install tailwindcss @tailwindcss/vite
41+
```
42+
43+
And then configure Vite to include the Tailwind plugin:
44+
45+
```js{2,6} [vite.config.js]
46+
import { defineConfig } from 'vite';
47+
import tailwindcss from '@tailwindcss/vite';
48+
49+
export default defineConfig({
50+
plugins: [
51+
tailwindcss(),
52+
// …
53+
],
54+
});
55+
```
56+
57+
Finally, you need to import Tailwind in your CSS file:
58+
59+
```css [app/views/css/app.css]
60+
@import "tailwindcss";
61+
@source "../";
62+
63+
...
64+
65+
```
66+
67+
And then include your CSS file in your layout templates:
68+
69+
```blade{7,12-14}
70+
<!doctype html>
71+
<html>
72+
<head>
73+
<meta charset="utf-8" />
74+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
75+
76+
@vite('resources/css/app.css')
77+
78+
...
79+
</head>
80+
<body>
81+
<h1 class="text-3xl font-bold underline">
82+
Hello world!
83+
</h1>
84+
</body>
85+
</html>
86+
```
87+
88+
## Migrating from v3 to v4
89+
90+
If you want to migrate from Tailwind v3 to v4 in Leaf MVC, you can do so by following these steps:
91+
92+
1. Update all your dependencies to the latest version:
93+
94+
```bash:no-line-numbers
95+
composer update
96+
```
97+
98+
2. Remove old tailwind config, autoprefixer, and postcss files
99+
100+
3. Run the `view:install` command to install Tailwind v4:
22101

23-
## Using Tailwind
102+
```bash:no-line-numbers
103+
php leaf view:install --tailwind
104+
```
24105

25-
Once setup, Leaf will include all the Tailwind imports which means you can jump into your UI and start writing your components with Tailwind. It also includes the tailwind config in the root of your application. This allows you to define all the configuration for your project if it does not match what Leaf has generated for you.
106+
4. Update your CSS file to remove @tailwind directives:
26107

27-
You can then go ahead to test out that your Tailwind install works fine:
108+
```css [app/views/css/app.css]
109+
@import "tailwindcss";
110+
@source "../";
28111

29-
```html
30-
<body>
31-
<h1 class="text-4xl text-blue-600">Welcome to Tailwind</h1>
32-
<p class="text-center">Leaf is amazing!</p>
33-
</body>
112+
@tailwind base; [!code --]
113+
@tailwind components; [!code --]
114+
@tailwind utilities; [!code --]
34115
```
35116

36-
## Manual Installation
117+
That's it!
118+
119+
## Manual Installation for TW v3
37120

38121
Leaf MVC comes with Vite out of the box, which is a modern build tool that supports Tailwind CSS out of the box. To get started, you need to install Tailwind CSS and its dependencies:
39122

@@ -101,24 +184,4 @@ The final step is to import your CSS file in your root layout file so that it ge
101184
102185
That's it! You now have Tailwind CSS set up in your Leaf project. You can start using Tailwind utility classes in your views to style your UI.
103186
104-
Be sure to start your vite server by running:
105-
106-
::: code-group
107-
108-
```bash:no-line-numbers [Leaf CLI]
109-
leaf view:dev
110-
```
111-
112-
```bash:no-line-numbers [npm]
113-
npm i && npm run dev
114-
```
115-
116-
```bash:no-line-numbers [pnpm]
117-
pnpm i && pnpm run dev
118-
```
119-
120-
```bash:no-line-numbers [yarn]
121-
yarn && yarn dev
122-
```
123-
124-
:::
187+
Be sure to restart your Leaf server so that Leaf can pick up on the new Vite configuration.

0 commit comments

Comments
 (0)