How to add TailwindCSS in Angular with Nx

We all know that TailwindCSS, has becoming more and more popular these days as it really makes the development faster with the pretty good default css utilities that you can use to build up your components and pages.

Today, I’m gonna show you, how to add TailwindCSS in you Angular project with Nx.

Let’s assume that you already have an Nx workspace with an Angular generated application.

First, you’re gonna need to install stuffs first for the TailwindCSS to work or be build in your angular project.

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

Nothing so fancy in here, but you need to understand the @angular-biulders/custom-webpack here, it basically allows you to modify your build and serve configuration without injecting it.

Next is you’re gonna need to initialize a TailwindCSS config:

npx tailwind init

This will generate a tailwind.config.js in the root folder, so go ahead and copy and paste these in your config:

Now, you’re gonna need to tell angular to use the angular-builder/custom-webpack that you have so it can process your TailwindCSS in your build.

Now, you need to add you’re tailwindcss utilities in your styles.scss

// styles.scss
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

And there you go, all that’s left is for you to run or serve your application.

ng serve or npm start

start using tailwind css utilities and see for yourself. :)

Have a good one!