Setting Up Tailwind in Angular

Thanks to Angular team for making it so easy to integrate Tailwind with Angular 12 and above to a point that I really thought if I should write a post for it. Finally convinced myself to document it, since there were not many good references I could find related to this.

Lets first create a new Angular application. When new application is created, make sure you use CSS as the styling option.

ng new tailangular && cd tailangular

Now we have to add Tailwind as a dependency to our application

npm install --save-dev tailwindcss

Once you have it installed, its time to create the tailwind config file, so that Angular can pick it up when its building or running the application.

npx tailwindcss init

This will create the tailwind.config.js file with the following content.

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

Now you can include the tailwind directives to the src/styles.css as shown
below

/* src/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

That's it, now you can use Tailwind in your components. I don't think other frameworks have such easy integration as Angular. From Angular 12's release notes, it appears this is supported from Angular 11.2 but I tried it only with Angular 12.

Enjoy using Tailwind with Angular's template system!