Add Tailwind CSS to Angular application

Unlike most CSS frameworks that provide pre-built components, Tailwind provides thousands of low-level utility classes that you can then combine to create custom designs. It's based on the philosophy that anything you can do with CSS, you can accomplish by adding utility classes directly into your HTML.

As for Angular, it is a platform for developing high-quality enterprise applications. Combine Angular and Tailwind and you'll have a perfect stack for building world-class web applications.

In this guide, we are going to see how to add Tailwind CSS to your Angular application.

Generate a new Angular application

Start by creating a new Angular project using the command ng new:

ng new my-app

When the Angular CLI asks you the question ” which stylesheet format would you like to use? ” choose CSS because:

• You don't need a CSS preprocessor like Sass. With Tailwind, it's really rare to write CSS.
• Your build will be faster because your CSS won't need to go through multiple compilation phases.

If you have an existing project or want to use a CSS preprocessor, don't worry! This guide remains applicable.

Install dependencies

Install the necessary dependencies with npm:

npm install postcss --save-dev
npm install tailwindcss

If you use npm, you technically don't need to install postcss. But installing it will allow you to avoid hoisting problems and will make your setup more robust.

Create the Tailwind configuration file

npx tailwind init

This command will create a named file tailwind.config.js which will contain the configuration of Tailwind CSS. It is in this file that you can customize your design system and add plugins to Tailwind.

Specify the localization of your HTML and TypeScript

Tailwind utility classes are generated on the fly when you use them in your application. So you need to tell Tailwind where to look for the use of these classes in your project.

Open the file tailwind.config.js and replace its contents with:

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

Thanks to this configuration, Tailwind will scan the content of all HTML and TypeScript files located in the src and projects.

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;

Thanks to this, Tailwind will process the directives @tailwind and inject the styles associated with the base, components, and layers in their place utilities.

Enjoy!

You can now start your Angular application and enjoy Tailwind:

npm start