You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
docs: prioritize ng add for Tailwind CSS and clarify manual steps
This commit updates the Tailwind CSS integration guide (`adev/src/content/guide/tailwind.md`) to introduce `ng add tailwindcss` as the primary, automated method for integrating Tailwind CSS.
Copy file name to clipboardExpand all lines: adev/src/content/guide/tailwind.md
+22-6Lines changed: 22 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,27 @@
2
2
3
3
[Tailwind CSS](https://tailwindcss.com/) is a utility-first CSS framework that can be used to build modern websites without ever leaving your HTML. This guide will walk you through setting up Tailwind CSS in your Angular project.
4
4
5
-
## Setting up Tailwind CSS
5
+
## Automated Setup with `ng add`
6
+
7
+
Angular CLI provides a streamlined way to integrate Tailwind CSS into your project using the `ng add` command. This command automatically installs the necessary packages, configures Tailwind CSS, and updates your project's build settings.
8
+
9
+
First, navigate to your Angular project's root directory in a terminal and run the following command:
10
+
11
+
```shell
12
+
ng add tailwindcss
13
+
```
14
+
15
+
This command performs the following actions:
16
+
17
+
- Installs `tailwindcss` and its peer dependencies.
18
+
- Configures the project to use Tailwind CSS.
19
+
- Adds the Tailwind CSS `@import` statement to your styles.
20
+
21
+
After running `ng add tailwindcss`, you can immediately start using Tailwind's utility classes in your component templates.
22
+
23
+
## Manual Setup (Alternative Method)
24
+
25
+
If you prefer to set up Tailwind CSS manually, follow these steps:
6
26
7
27
### 1. Create an Angular project
8
28
@@ -61,7 +81,7 @@ If you're using SCSS, add `@use` to `./src/styles.scss`.
61
81
62
82
### 5. Start using Tailwind in your project
63
83
64
-
You can now start using Tailwind's utility classes in your component templates to style your application.
84
+
You can now start using Tailwind's utility classes in your component templates to style your application. Run your build process with `ng serve` and you should see the styled heading.
65
85
66
86
For example, you can add the following to your `app.html` file:
67
87
@@ -71,10 +91,6 @@ For example, you can add the following to your `app.html` file:
71
91
</h1>
72
92
</docs-code>
73
93
74
-
### 6. Start using Tailwind in your project
75
-
76
-
Run your build process with `ng serve` and you should see the styled heading.
0 commit comments