Angular: Configure TailwindCSS 🔧

The complete guide on how to setup Tailwind CSS in Angular

Photo by Ak Ka on Unsplash

In a previous article, I explained the reasons why I left Angular Material to move towards a low-level UI framework. My choice fell rather quickly on TailwindCSS, which has a realistic approach to developing a web application of any kind.

How can we integrate it well into an Angular application?
We will see it quickly enough, this framework developed by Google and its community allows you to create a robust and devilishly efficient configuration.

There are many articles explaining how to do this, but some are outdated, or not detailed enough. Sometimes I had to do some extra research to find the missing information. And we will see that they are mostly wrong about one thing…

At the end of this article, you will have everything you need to configure TailwindCSS in any environment. Development, Staging, Production, … Let’s see this in detail!

Install dependencies 📦

We’ll start by running a big command in the console:

npm i -D @angular-builders/custom-webpack tailwindcss postcss-import postcss-loader postcss-scss

What are these new dev-dependencies that we add in our application?