3/9/22, 12:39 How to use TailwindCSS in Angular - DEV Community 👩‍💻👨‍💻

Brent Vanwildemeersch
Posted on 13 oct 2020
• Updated on 13 nov 2020

How to use TailwindCSS in Angular

#angular #webdev #webpack #css

Quick summary on how to configure Angular (8+) to use TailwindCSS as the CSS Framework in your project for
building responsive designs.

In this guide we chose the SCSS option in the AngularCLI setup.

Install TailwindCSS
As stated in the TailwindCSS documentation, we can easily install Tailwind using the following command

# Using npm

npm install tailwindcss

# Using Yarn

yarn add tailwindcss

Install PostCSS packages

PostCSS packages will be used to process TailwindCSS in the Angular project while building the project or during local
development

#using npm

npm install postcss-scss postcss-import postcss-loader -D

https://dev.to/vanwildemeerschbrent/how-to-use-tailwindcss-in-angular-4o2e 1/6
3/9/22, 12:39 How to use TailwindCSS in Angular - DEV Community 👩‍💻👨‍💻

#using Yarn

yarn add postcss-scss postcss-import postcss-loader -D

Custom webpack for Angular

By using TailwindCSS we need to make changes to the default Webpack configuration that Angular uses. We will use
the @angular-builders/custom-webpack package that will allows us to modify the Angular build configuration without
ejecting it.

#using npm

npm install @angular-builders/custom-webpack -D

#using Yarn

yarn add @angular-builders/custom-webpack -D

Create webpack.config.js
Create a webpack.config.js file in the root of project. Once created we can setup the webpack configuration.

module.exports = {

module: {

rules: [

test: /\.scss$/,

loader: 'postcss-loader',

options: {

ident: 'postcss',

syntax: 'postcss-scss',

plugins: () => [

require('postcss-import'),

require('tailwindcss'),

require('autoprefixer'),

}
https://dev.to/vanwildemeerschbrent/how-to-use-tailwindcss-in-angular-4o2e 2/6
3/9/22, 12:39 How to use TailwindCSS in Angular - DEV Community 👩‍💻👨‍💻
}

};

As you can see in the webpack-config file above, we will process any .scss files in our project using or the installed
postCSS -packages and we require tailwindcss as a plugin in our config.

Modify angular.json configuration

The angular.json file in the root of the Angular project defines the settings that need to be used when using
AngularCLI commands ( ng serve , ng build )

We will not adjust our angular.json file manually, but use the AngularCLI to make the changes

Change the webpack-builder to the installed @angular-builders/custom-webpack package for the ng build
command

ng config projects.<your-project>.architect.build.builder

@angular-builders/custom-webpack:browser

Change the webpack configuration to the newly created configuration file for the ng build command

ng config

projects.<your-project>.architect.build.options.customWebpackConfig.path webpack.config.js

When serving the project on a local dev-server, use the custom-webpack package

ng config projects.<your-project>.architect.serve.builder

@angular-builders/custom-webpack:dev-server

h h l ld
https://dev.to/vanwildemeerschbrent/how-to-use-tailwindcss-in-angular-4o2e h d fl 3/6
3/9/22, 12:39 How to use TailwindCSS in Angular - DEV Community 👩‍💻👨‍💻

When serving the project on a local dev-server, use the custom created webpack.config file

ng config projects.<your-project>.architect.serve.builder

@angular-builders/custom-webpack:dev-server

Setup Tailwind configuration

Setting up a custom Tailwind configuration file can be done easily using the following command

npx tailwind init

This will create a tailwind.config.js file in the root of your project that you can use to extend Tailwind

Docs on extension of TailwindCSS

Add Tailwind to your CSS

Add the following CSS to your styles.scss in the src folder to inject Tailwind's base , components and utilities into
your CSS

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

All done
Everything should be configured correctly to make use of the Tailwind CSS-library in your Angular Project.

A simple addition of a TailwindCSS utility in your app.component.html should give you an indication if Tailwind is
working correctly in your project.

(It is useful to restart the local development-server ng serve to make sure that everything compiles correctly)
https://dev.to/vanwildemeerschbrent/how-to-use-tailwindcss-in-angular-4o2e 4/6
3/9/22, 12:39 How to use TailwindCSS in Angular - DEV Community 👩‍💻👨‍💻

Discussion (0)

Code of Conduct
•
Report abuse

👋 Welcome new DEV members in our Welcome Thread

Say hello to the newest members of DEV.

Brent Vanwildemeersch

Documenting solutions and interesting things about software development

LOCATION
Belgium
WORK
Software Engineer

JOINED
3 ene 2020

More from Brent Vanwildemeersch

How to deploy your Node App/API on Heroku

#node
#heroku
#webdev

5 useful browser extensions for front-end developers

https://dev.to/vanwildemeerschbrent/how-to-use-tailwindcss-in-angular-4o2e 5/6
3/9/22, 12:39 How to use TailwindCSS in Angular - DEV Community 👩‍💻👨‍💻
p
#webdev
#beginners

Docker: Angular setup + issue exposed port not accessible

#todayilearned
#webdev
#docker
#angular

https://dev.to/vanwildemeerschbrent/how-to-use-tailwindcss-in-angular-4o2e 6/6