Install Tailwind CSS with Angular

Setting up Tailwind CSS in an Angular 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.

Terminal

ng new my-project --style css
cd my-project

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

Terminal

npm install tailwindcss @tailwindcss/postcss postcss --force

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

.postcssrc.json

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

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

styles.css

@import "tailwindcss";

Run your build process with ng serve.

Terminal

ng serve

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

app.component.html

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