Angular and TailwindCSS

Jacob Neterer
Aug 13 · 4 min read

TailwindCSS is a hot topic in the web development world and Angular devs want in on the action. I’ve been seeing developers asking how to use Angular and TailwindCSS together all over the internet, from Stack Overflow, to Twitter and blog post comments. If you haven’t heard of TailwindCSS, it is a fantastic utility-first CSS framework. If you want to build Angular apps fast, this is the framework for you! Continue reading for a simple explanation on how to integrate TailwindCSS with Angular.

Image for post
Image for post

Create Your Angular App

First, let’s create our angular application.

ng new tailwindcss-angular-app

When the CLI asks you which styling framework to use, choose SCSS.

Set Up TailwindCSS

Install dependencies

Next, let's install TailwindCSS.

npm install tailwindcss -D

Next, we will install @angular-builders/custom-webpack for a custom webpack build step and the various postcss packages for building Tailwind.

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

Create webpack.config.js

Create a webpack.config.js file at the root of your project with the following contents:

module.exports = {
module: {
rules: [
{
test: /\.scss$/,
loader: 'postcss-loader',
options: {
ident: 'postcss',
syntax: 'postcss-scss',
plugins: () => [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
]
}
}
]
}
};

Modify angular.json

This will tell our application to use our custom builder for Angular’s CLI build and serve commands.

ng config projects.<your-project>.architect.build.builder @angular-builders/custom-webpack:browserng config projects.<your-project>.architect.build.options.customWebpackConfig.path webpack.config.jsng config projects.<your-project>.architect.serve.builder @angular-builders/custom-webpack:dev-serverng config projects.<your-project>.architect.serve.options.customWebpackConfig.path webpack.config.js

Initialize TailwindCSS

To create the configuration file for TailwindCSS, execute the following:

npx tailwind init

TailwindCSS ships with default styles, but you can use this file to customize themes, breakpoints, colors, spacing, and more!

Inject Tailwind’s Styles

In your root style sheet src/styles.scss inject Tailwind’s base, component, and utilities styles:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Test it Out!

Paste the following code into your app.component.html file, run your app ng serve, and see TailwindCSS working in your own Angular application!

<h1 class="my-8 text-center text-6xl font-bold"><span class="text-teal-500">TailwindCSS</span> and <span class="text-red-600">Angular</span> is awesome!</h1>
<p class="text-center text-3xl">Thanks for reading!</p>
Image for post
Image for post

Bonus: Purge Unused TailwindCSS Classes

At this point, when building our application for production ng build --prod, you will see a whopping 1.3MB styles.css file 😳.

Image for post
Image for post
Bundle Without Purging Unused TailwindCSS Classes

In general, you are only going to use a fraction of the classes that TailwindCSS provides, so we can safely purge any unused classes.

First, install dotenv.

npm install dotenv -D

We will use dotenv for loading an environment variable that tells Tailwind if we need to purge unused classes or not.

Next, let’s modify our tailwind.config.js file to purge any unused classes. We simply require dotenv, access the ENABLE_PURGE environment variable (if not found, say in your local environment, defaults to false), set purge enabled to true if purge is true, and search any *.html and *.scss files for classes that we’ve used.

+require('dotenv').config();
+const enablePurge = process.env.ENABLE_PURGE || false;
module.exports = {
- purge: [],
+ purge: {
+ enabled: enablePurge,
+ content: [
+ './src/**/*.html',
+ './src/**/*.scss'
+ ]
+ },
theme: {
extend: {},
},
variants: {},
plugins: [],
}

Lastly, don’t forget to create your .env file with ENABLE_PURGE set to true. As a note, you don’t need to do this for local development, but I do urge purging any unused classes in higher environments like test and production.

ENABLE_PURGE=true

Now if you run ng build --prod your styles.css file will look much, much smaller, a solid 5.24KB 😁.

Image for post
Image for post
Bundle With Purging Unused TailwindCSS Classes

Check out my GitHub repo that demonstrates this tutorial!

Final Thoughts

Integrating TailwindCSS into your Angular app is as simple as that. I use it for almost all of my Angular applications. It makes development lightning fast and I would recommend it to everyone! Do you have any additional questions regarding using TailwindCSS with Angular? Post your questions in the comments and I’ll get back to you! Thanks for reading!

You can find me on Twitter, GitHub, LinkedIn, and my website!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store