Install Tailwind CSS with Angular

Installation

Setting up Tailwind CSS in an Angular project.

Create your project

Start by creating a new Angular project if you don’t have one set up already. The most common approach is to use Angular CLI.

ng new my-project --style csscd my-project

Install Tailwind CSS

Install @tailwindcss/postcss and its peer dependencies via npm.

npm install tailwindcss @tailwindcss/postcss postcss --force

Configure PostCSS Plugins

Create a .postcssrc.json file in the root of your project and add the @tailwindcss/postcss plugin to your PostCSS configuration.

{  "plugins": {    "@tailwindcss/postcss": {}  }}

Import Tailwind CSS

Add an @import to ./src/styles.css that imports Tailwind CSS.

Start your build process

Run your build process with ng serve.

Start using Tailwind in your project

Start using Tailwind’s utility classes to style your content.

<h1 class="text-3xl font-bold underline">  Hello world!</h1>