<p>Today we will see how to install TailwindCSS in an Angular project</p>
<h2 id="heading-create-or-use-your-angular-project"><strong>Create or use your Angular project</strong></h2>
<pre><code class="lang-typescript">ng <span class="hljs-keyword">new</span> project
cd project
</code></pre>
<h2 id="heading-install-and-configure-tailwindcss">**Install and configure TailwindCSS **</h2>
<pre><code class="lang-typescript">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"><strong>Configure the paths of all your template files</strong></h2>
<p>Edit your <em>tailwind.config.js</em> to add these lines :</p>
<pre><code class="lang-typescript"><span class="hljs-built_in">module</span>.<span class="hljs-built_in">exports</span> = {
  content: [
    <span class="hljs-string">"./src/**/*.{html,ts}"</span>,
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
</code></pre>
<h2 id="heading-add-tailwindcss-directives-to-your-css-file-stylecss"><strong>Add TailwindCSS directives to your CSS file <em>style.css</em></strong></h2>
<pre><code class="lang-typescript"><span class="hljs-meta">@tailwind</span> base;
<span class="hljs-meta">@tailwind</span> components;
<span class="hljs-meta">@tailwind</span> utilities;
</code></pre>
<p>**Enjoy using TailwindCSS ** <code>ng serve</code></p>


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

## **Create or use your Angular project**

```typescript
ng new project
cd project
```

## \*\*Install and configure TailwindCSS \*\*

```typescript
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 :

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

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

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

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

Install TailwindCSS in Angular

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

Lead Developer Front-end - Enthusiast Developer - NX & Angular Lover


Lead Developer Front-end - Enthusiast Developer - NX &amp; Angular Lover


Install TailwindCSS in Angular

Table of contents

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

Install and configure TailwindCSS