How to Add Tailwind CSS to Your Angular Application

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:

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:

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 and make your setup future-proof.

3. Create your configuration file

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:

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:

@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:

npm start