<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

Freelance Lead Developer Front-end - Enthusiast Developer - NX / Angular &amp; JavaScript


Gilles' Journey

Gilles' Journey

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