May 25, 2021

Guide to integrate Tailwind CSS into Angular Project

If you are an Angular developer and waiting to integrate Tailwind CSS into your Angular project, here is some good news for you. With the new Angular version update v11.2, Now Angular supports the integration of Tailwind CSS in few steps, please follow this pull request merged by Angular to support this feature, But we suggest you upgrade to Angular 12 for easy integration.

What is Tailwind CSS?

If you are new to Tailwind CSS or never heard before, it's a utility-first CSS framework and packed with many classes for a different set of styles and you need to apply these classes individually to style an element, unlike bootstrap. This will help to develop any styles directly in markup instead of creating separate classes.

Why upgrading to Angular 12 is necessary?

As you know that, Angular recently released the latest version of Angular, i.e. v12, in this upgrade, the Angular team has provided easy integration of Tailwind in very few steps and also resolved all the issues related to purging unused CSS to make bundle file very small.

Steps to integrate tailwind into Angular

Update your project to the latest version of Angular (v12)
Install the tailwind in npm install tailwindcss@latest postcss@latest autoprefixer@latest
Add the tailwind configuration file tailwind.config.js to the root of your project
Import the tailwind CSS styles into your Angular styles.scss file

Configuration of Tailwind CSS

The below configuration needs to be added in the tailwind.config.js

As you can see below, we have added the purge object inside the configuration files, which helps to remove unused CSS files from your final production bundle and makes it very lightweight, You can refer to this link to understand on controlling the purging of the CSS.

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

Importing tailwind styles into Angular

The tailwind base CSS files need to be imported in styles.scss of your Angular project

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Demo

References

Joel Duckworth 25-May-2021, 12:41 AM

This configuration seems to enable purging on ng serve too, anyone know how to make purge work only for ng build?