Skip to content

Commit 396c25e

Browse files
clydinkirjs
authored andcommitted
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.
1 parent 5ddeafc commit 396c25e

File tree

1 file changed

+22
-6
lines changed

1 file changed

+22
-6
lines changed

adev/src/content/guide/tailwind.md

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,27 @@
22

33
[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.
44

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:
626

727
### 1. Create an Angular project
828

@@ -61,7 +81,7 @@ If you're using SCSS, add `@use` to `./src/styles.scss`.
6181

6282
### 5. Start using Tailwind in your project
6383

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.
6585

6686
For example, you can add the following to your `app.html` file:
6787

@@ -71,10 +91,6 @@ For example, you can add the following to your `app.html` file:
7191
</h1>
7292
</docs-code>
7393

74-
### 6. Start using Tailwind in your project
75-
76-
Run your build process with `ng serve` and you should see the styled heading.
77-
7894
## Additional Resources
7995

8096
- [Tailwind CSS Documentation](https://tailwindcss.com/docs)

0 commit comments

Comments
 (0)