# Using Tailwind CSS in Angular 11.2+ Project🔥

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671270499529/7AXvggB1t.png)

#### Setting up Tailwind CSS in an Angular Project

Tailwind CSS is a utility first CSS framework for building custom interfaces easily. From Angular 11.2, it includes native support for T[ailwind CSS.](https://tailwindcss.com)  
Ensure Angular version is 12.2+ and Node.js version 12.13.0+

### Creating your project

Start by creating a new angular project using npm

**ng new angulartailwind-demo**

### Set up Tailwind CSS

Run following npm command to install Tailwind CSS package.

**npm install -D tailwindcss**

Install postcss and autoprefixer dependencies

**npm install postcss@latest autoprefixer@latest**

### Create Tailwind CSS Configuration File

Generate tailwind CSS configuration file(tailwind.config.js) using following command

```
**npx tailwindcss init**
```

This command will create a config file in your project root directory.

Learn more about Tailwind Configuration [read more](https://tailwindcss.com/docs/configuration)

### Include Tailwind in your SCSS

> If you are using **css**  
> Import Tailwind CSS into styles.css using following code.

> If you are using **scss**  
> Import Tailwind CSS into styles.scss using following code.

### Test the Tailwind CSS Integration

Add the folowing code to app.component.html

<button class=”w-1/2 flex items-center justify-center rounded-md bg-black text-white” type=”submit”>Buy now</button>

### Purge the unused CSS in production

Tailwind CSS gives a fearture to remove unused css classes to reduce the bundle size.We can add purge option on the tailwind.config.js file as folows.

It will check the ts and html files in the entire src directory and purge unused style classes from the project.

> For more information please refer [Tailwind CSS Documentation](https://tailwindcss.com/docs)

Follow me on [Medium](https://yshnv.medium.com) to get regular updates on blogs.