<h2 id="heading-create-or-use-your-angular-project">Create or use your Angular project</h2>
<pre><code>ng new project
cd project
</code></pre><h2 id="heading-install-and-configure-tailwindcss">Install and configure TailwindCSS </h2>
<pre><code>npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init # Will generate a file tailwind.config.js
</code></pre><h2 id="heading-configure-the-paths-of-all-your-template-files">Configure the paths of all your template files</h2>
Edit your tailwind.config.js to add these lines :
<pre><code>module.exports = {
 content: [
 "./src/**/*.{html,ts}",
 ],
 theme: {
 extend: {},
 },
 plugins: [],
}
</code></pre><h2 id="heading-add-tailwindcss-directives-to-your-css-file-stylecss">Add TailwindCSS directives to your CSS file style.css</h2>
<pre><code>@tailwind base;
@tailwind components;
@tailwind utilities;
</code></pre>Enjoy using TailwindCSS 
<pre><code>ng serve
</code></pre>

## **Create or use your Angular project**
```
ng new project
cd project
``` 

## **Install  and configure TailwindCSS **
```
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init # Will generate a file tailwind.config.js
``` 

## **Configure the paths of all your template files**

Edit your *tailwind.config.js* to add these lines :

```
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

## **Add TailwindCSS directives to your CSS file *style.css***

```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

**Enjoy using TailwindCSS **
```
ng serve
```


Today we will see how to install TailwindCSS in an Angular project

KSE

KSE

Install TailwindCSS in Angular

Today we will see how to install TailwindCSS in an Angular project

Create or use your Angular project

Install and configure TailwindCSS

Configure the paths of all your template files

Add TailwindCSS directives to your CSS file style.css