Using Tailwind CSS in Angular 11.2+ Project🔥

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 Tailwind CSS.
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

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

Follow me on Medium to get regular updates on blogs.