How to Add Tailwind CSS to Your Angular Application
Tags: angular, tailwindcss
Published: 2021-03-04 17:44:25

---
title: How to Add Tailwind CSS to Your Angular Application
published: true
date: 2021-02-13 11:26:08 UTC
tags: Angular,Tailwind
canonical_url: https://www.amadousall.com/how-to-add-tailwind-css-to-your-angular-application/
---

 ![How to Add Tailwind CSS to Your Angular Application](https://www.amadousall.com/content/images/size/w2000/2021/02/how-to-add-tailwind-to-your-angular-application.png)

Tailwind CSS is a utility-first CSS framework that makes it easy to build outstanding design systems. It's based on the philosophy that pretty much anything you can do with CSS, you can achieve it by adding a bunch of utility classes directly in your HTML. Angular, on the other hand, is a platform that allows you to build high-quality enterprise applications. Combine Angular with Tailwind CSS and you have a perfect stack for building top-notch web applications.

In this article, I will walk you through how you can add Tailwind CSS to your Angular application.

> This article assumes that you're using Angular CLI version 11.2.0 or higher.

## 1. Generate a new Angular application

Let's start by creating a new Angular project using the `ng new` command:

```bash
ng new my-app
```

When the CLI asks you "*which stylesheet format would you like to use?*" choose CSS because:

* With Tailwind, you don't need a CSS preprocessor like Sass. You'll rarely need to write custom CSS anyway.
* Your CSS will compile much faster because it won't need to pass through multiple compilation pipelines.

If you want to use a CSS preprocessor, or have an existing project, don't worry! The rest of this guide is still relevant.

## 2. Install the needed dependencies

Now, install the required dependencies via npm:

```bash
npm install postcss --save-dev
npm install tailwindcss
```

> If you use npm, you technically don't need to manually install the postcss package. But doing so will help you avoid [hoisting issues](https://twitter.com/dan_abramov/status/951931842273398784?s=20) and make your setup future-proof.

## 3. Create your configuration file

```bash
npx tailwind init
```

This command will create the `tailwind.config.js` file which contains your Tailwind CSS configuration. This is where you can customize your design system and other Tailwind options like Purge CSS.

## 4. Configure Purge CSS

Tailwind provides out of the box support for Purge CSS—a tool that will remove all unused Tailwind utility classes from your production bundle. Open the `tailwind.config.js` file and replace its content with the following:

 ```javascript
module.exports = {
  purge: {
    enabled: process.env.WEBPACK_DEV_SERVER === 'true' && process.argv.join(' ').indexOf('build') !== -1,
    content: [
      "./src/**/*.{html,ts}",
      "./projects/**/*.{html,ts}"
    ]
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

 ```

We need this because Tailwind generate thousands of CSS classes by default—many of which we won't use in your application. The configuration above tells Purge CSS to analyze all the HTML and TypeScript files inside the `src` and `projects` folders and remove any CSS class that is not used inside those files when using `ng build`. This will leave you with a very lightweight CSS bundle for production. When using `ng serve` the full set of Tailwind classes will still be loaded.

## 5. Add Tailwind directives to your global CSS file

Open your global CSS file (`src/style.css`) and add the following content:

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

With this, Tailwind will process the  `@tailwind` directives and inject its `base`, `components`, and `utilities` classes.

## 6. Enjoy!

You can now start your Angular application and enjoy using Tailwind:

```bash
npm start
```