How to Add Tailwind CSS to Your Angular Application

Amadou Sall -

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.

1. Generate a new Angular application

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 set up Tailwind plugins.

4. Configure the location of your HTML and TypeScript files

Tailwind utility classes are generated on demand when you actually use them in your code. So you need to tell Tailwind where to search for those utilities inside your project. Open the tailwind.config.js file and replace its content with the following:

module.exports = {
 content: ['./src/**/*.{html,ts}', './projects/**/*.{html,ts}'],
 theme: {
   extend: {},
 },
 plugins: [],
};

The configuration above tells Tailwind CSS that the HTML and TypeScript it needs to scan are located inside the src and projects folders.

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