Setup Tailwind CSS in Angular 8 project

You can find many guides about how you can configure Tailwind CSS with Angular 6, 7 . Half of them is using the ng-eject (it’s not available from Angular 6+), the others are built on ng-tailwindcss which is a great tool but I wanted to keep my configuration simple as possible and don’t install a tool to be able to use another one. So let’s begin:

UPDATE: The minimum Angular version is 8 for this article. You may get errors if you try to configure it on Angular 7 or earlier versions. I also created a sample project and published to GitHub, here you can find it: https://github.com/bajzat/tailwind-angular8 .

Webpack custom configuration:

Tailwind CSS could be integrated easily into Webpack based projects, but in case of Angular CLI project, the webpack configuration is hidden. To resolve this issue we will use the @angular-builders/custom-webpack package which allows us to add a custom configuration to integrate the tailwind compiling into the build process. You can find a really great article about this package at Netanel Basal.

Install the necessary packages:

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

Add Tailwind imports to style.scss

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

Create Tailwind configuration file

Execute the following command in terminal/cmd:

npx tailwind init

Let the fun begins, extend webpack configuration

Create a webpack.config.js file in the root and modify the angular.json file to use the custom builder and our new configuration file:

Modify your freshly created webpack.config.js

The last step is adding the Tailwind into the build chain.

Add a button to your HTML and test the application

npm start

…and enjoy the result:

Github repo: https://github.com/bajzat/tailwind-angular8