Skip to content

Commit 206c2af

Browse files
mychidarkomychidarko
committed
feat: update tailwind docs
1 parent 9a8c734 commit 206c2af

File tree

1 file changed

+26
-148
lines changed

1 file changed

+26
-148
lines changed

‎src/docs/frontend/tailwind.md‎

Lines changed: 26 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -6,183 +6,61 @@
66
import TutorialNumber from '@theme/components/shared/TutorialNumber.vue';
77
</script>
88

9-
Tailwind is a utility-first CSS framework that provides a set of utility classes to help you build your UI. Leaf has first-class support for Tailwind CSS, and it's the recommended way to style your Inertia apps. This guide will show you how to set up Tailwind CSS in your Leaf project with minimal configuration.
9+
Tailwind is a utility-first CSS framework that provides a set of utility classes to help you build your UI, and is the recommended way to style your Leaf MVC apps.
1010

11-
## Using the CLI
11+
## Setting Up
1212

13-
You can set up Tailwind CSS in your Leaf MVC project using the php leaf console. To do this, run the following command:
13+
***If you are using the Leaf MVC application starter or one of the inertia setups, then all of this is already set up for you. Just restart your server and you are good to go.***
14+
15+
Leaf MVC doesn't force you into any patterns, which is why we do not ship with tailwind by default. However, you can easily set up Tailwind CSS in your Leaf project using the `view:install` command.
1416

1517
::: code-group
1618

1719
<!-- ```bash:no-line-numbers [Leaf CLI]
1820
leaf view:install --tailwind
1921
``` -->
2022

21-
```bash:no-line-numbers [Leaf MVC CLI]
23+
```bash:no-line-numbers [Leaf MVC Console]
2224
php leaf view:install --tailwind
2325
```
2426

2527
:::
2628

2729
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.
2830

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 [vite.config.js]
46-
import { defineConfig } from 'vite';
47-
import tailwindcss from '@tailwindcss/vite'; // [!code ++]
48-
49-
export default defineConfig({
50-
plugins: [
51-
tailwindcss(), // [!code ++]
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{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('css/app.css') // [!code ++]
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-
<TutorialNumber number="1" /> Update all your dependencies to the latest version:
93-
94-
```bash:no-line-numbers
95-
composer update
96-
```
97-
98-
<TutorialNumber number="2" /> Remove old tailwind config, autoprefixer, and postcss files. <br /><br />
31+
## Usage with Blade
9932

100-
<TutorialNumber number="3" /> Run the `view:install` command to install Tailwind v4:
33+
To use Tailwind CSS in your Blade views, you can simply include the CSS file in your Blade template:
10134

102-
```bash:no-line-numbers
103-
php leaf view:install --tailwind
104-
```
105-
106-
<TutorialNumber number="4" /> Update your CSS file to remove @tailwind directives:
107-
108-
```css [app/views/css/app.css]
109-
@import "tailwindcss";
110-
@source "../";
111-
112-
@tailwind base; [!code --]
113-
@tailwind components; [!code --]
114-
@tailwind utilities; [!code --]
115-
```
116-
117-
That's it!
118-
119-
## Manual Installation for TW v3
120-
121-
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:
122-
123-
```bash:no-line-numbers
124-
npm install tailwindcss@latest postcss@latest autoprefixer@latest
35+
```blade:no-line-numbers
36+
@vite('css/app.css')
12537
```
12638

127-
Next, you need to create a Tailwind configuration file. You can do this by running the following command:
39+
An easier way to do this is to add it to a layout file, so you don't have to include it in every view file. If you are not using Blade, you can use the `vite()` function to include the CSS file in your template.
12840

129-
```bash:no-line-numbers
130-
npx tailwindcss init
41+
```php:no-line-numbers
42+
<?php vite('css/app.css'); ?>
13143
```
13244

133-
This will create a `tailwind.config.js` file in the root of your project. You can customize this file to suit your needs.
134-
135-
Next, you need to create a PostCSS configuration file. You can do this by running the following command:
45+
## Basic Theming
13646

137-
```bash:no-line-numbers
138-
touch postcss.config.js
139-
```
140-
141-
Add the following code to your `postcss.config.js` file:
47+
Tailwind v4 has extensive support for CSS variables which Leaf takes advantage of. You can easily set up your theme colors in your CSS file like this:
14248

143-
```javascript
144-
module.exports = {
145-
plugins: {
146-
tailwindcss: {},
147-
autoprefixer: {},
148-
},
49+
```css:no-line-numbers
50+
@theme {
51+
--color-primary: #ff0000;
52+
--color-secondary: #00ff00;
14953
}
15054
```
15155

152-
Next, you need to create a CSS file that imports Tailwind CSS. You can do this by running the following command:
153-
154-
```bash:no-line-numbers
155-
touch app/views/css/app.css
156-
```
157-
158-
Add the following code to your `app/views/css/app.css` file:
159-
160-
```css
161-
@tailwind base;
162-
@tailwind components;
163-
@tailwind utilities;
164-
```
56+
You can then use these variables in your view files like this:
16557

166-
Next, you need to add your CSS file to vite as an entry point. You can do this by adding the following code to your `vite.config.js` file:
167-
168-
```javascript
169-
defineConfig({
170-
```
171-
172-
The final step is to import your CSS file in your root layout file so that it gets included in your HTML.
173-
174-
```blade
175-
<!DOCTYPE html>
176-
<html lang="en">
177-
<head>
178-
<meta charset="UTF-8">
179-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
180-
<title>Leaf</title>
181-
182-
@vite('css/app.css') // [!code ++]
183-
...
58+
```blade:no-line-numbers
59+
<div class="bg-primary text-secondary">
60+
Hello, World!
61+
</div>
18462
```
18563

186-
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.
64+
Pretty sweet! All our scaffolds follow this pattern, so you can easily set up your theme colors in your CSS file and have them applied automatically.
18765

188-
Be sure to restart your Leaf server so that Leaf can pick up on the new Vite configuration.
66+
You can check out the [Tailwind docs](https://tailwindcss.com/docs/theme) for more information on theming with Tailwind.

0 commit comments

Comments
 (0)