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 directly 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.

Tailwind is a PostCSS plugin, but unfortunately, the Angular CLI, although it uses PostCSS under the hood for some operations, doesn't support PostCSS plugins as of today. So adding Tailwind to your Angular application isn't as easy as it should be.

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

1. Install the needed dependencies

Let's start by installing the required dependencies via npm:

npm install tailwindcss postcss-cli

or if you're using Yarn as package manager:

yarn add tailwindcss postcss-cli

2. Create your configuration files

 npx tailwind init -p

This command will create two configuration files: tailwind.config.js and postcss.config.js.

The tailwind.config.js file contains our Tailwind CSS configuration. This is where you can customize your design system and other Tailwind options.

The postcss.config.js file holds our PostCSS configuration. This is where you define all your PostCSS plugins.

3. Configure Purge CSS

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

module.exports = {
 purge: ['./src/**/*.html', './src/**/*.ts', './projects/**/*.html', './projects/**/*.ts'],
 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. This will leave you with a very lightweight CSS bundle.

4. Update the PostCSS configuration file

Open the postcss.config.js file and remove the autoprefixer plugin from the PostCSS configuration file. The content of the postcss.config.js should be as follows:

module.exports = {
  plugins: {
    tailwindcss: {}
  }
}

We do so because the Angular CLI will take care of adding all the vendor prefixes when processing our CSS. Under the hood, the Angular CLI uses PostCSS and the autoprefixer plugin.

5. Create your PostCSS source file

Create a file named src/style.pcss with the following content:

@tailwind base;
@tailwind components;
@tailwind utilities;
Be careful: the extension of this file is pcss, not css.

This file uses the @tailwind directive. PostCSS will process this directive and will inject Tailwind's base, components, and utilities classes into the src/styles.css file that will be consumed by the Angular CLI.

6. Add npm scripts to process our CSS

To process our PostCSS source file, add the following npm scripts to your package.json file:

{
  "scripts": {
    "postcss:build": "postcss src/styles.pcss -o src/styles.css",
  	"prestart": "npm run postcss:build",
  	"prebuild": "npm run postcss:build -- --env=production"
	}
}

With this configuration, whenever you start your Angular application using the npm start script, the PostCSS process will run and generate the full set of utilities inside the src/styles.css file.

Whenever we build our Angular application using the npm run build script, PostCSS will run in production mode which will activate the PurgeCSS plugin. Therefore, only the subset of the utilities you are using in your application will be generated inside the src/styles.css file.

7. Enjoy!

Now you can start your Angular application and enjoy using Tailwind:

npm start

If you enjoyed this article, follow @ahasall on Twitter for more content like this.