How to setup Tailwindcss in Angular project

The purpose of this article is to enhance the combination of Angular and Tailwindcss.

Prerequisites

• Angular

Tailwindcss

A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. according to the official definition visit tailwindcss official website to know more.

Installation

Inside your existing angular project or new one run the following commands in the project terminal:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Inside tailwind.config.js

Add the paths of your templates files

module.exports = {
// ...
  content: [
    "./src/**/*.{html,ts}",
  ],
  // ...
}

Add tailwind to style.scss

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

Use tailwind inside app.component.html

<div class="text-2xl">Angular and Tailwindss</div>

Run server

ng serve

References

1. Tailwindcss