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.

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.

Steps to follow

1. Update your project to the latest version of Angular (v11.2.0)
2. Install the tailwind in npm install [email protected] [email protected] [email protected] 
3. Install the tailwind plugins with npm i @tailwindcss/forms and npm i @tailwindcss/typography
4. Add the tailwind configuration file tailwind.config.js to the root of your project 
5. 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

module.exports = {
  prefix: '',
  purge: {
  },
  darkMode: 'class', // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [require('@tailwindcss/forms'),require('@tailwindcss/typography')],
};

Importing tailwind styles into Angular

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

@import 'tailwindcss/dist/base.min.css';
@import 'tailwindcss/dist/components.min.css';
@import 'tailwindcss/dist/utilities.min.css';

Demo

• Github Repo: https://github.com/allabouttech0803/angular-tailwindcss-starter
• App: https://angular-tailwindcss-starter.vercel.app/

References

1. https://github.com/angular/angular-cli/pull/19935
2. https://tailwindcss.com/