How to add Tailwind to an Angular Application

Tailwind is a popular CSS framework that is becoming more and more popular everyday.

Tailwind has good integration to SPA frameworks like React and Vue, but up until recently it was alot of work to get it integrated with Angular. That all changed with the introduction of Angular 11.2. And with Angular 12 and tailwind 3.0 more features were introduced to make it easier to integrate tailwind CSS.

This article will show how to setup Tailwind with Angular 12 and above.

For Tailwind to work properly, we are going to be using Tailwind version 3 and above.

In your angular project CLI install the below dependencies

npm install postcss --save-dev
npm install tailwindcss

After installing the dependencies, create the tailwind configuration file using below command.

npx tailwind init

Once tailwind config file is created, we need to add additional configurations. Tailwind creates utility classes on demand, and we need to mention in tailwind.config.js when these utility classes need to be created.

In tailwind.config.js replace its contents with the below configurations,

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

Finally add below tailwind directives to global CSS file i.e add to style.css or style.scss,

@tailwind base;
@tailwind components;
@tailwind utilities;

That’s it! Tailwind is now setup in Angular. Go ahead and start your Angular application using below command

ng start

For more blogs on development and coding, checkout Development Articles