DEV Community

Fareez Ahamed
Fareez Ahamed

Posted on • Originally published at fareez.info

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
Enter fullscreen mode Exit fullscreen mode

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

npm install --save-dev tailwindcss
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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: [],
};
Enter fullscreen mode Exit fullscreen mode

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

/* src/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)