ngTailwind - Angular with TailwindCSS

Firstly, a huge thanks to Jacob Neterer for the original medium article on this

Please check out his tutorial on Medium

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$/i,
        loader: "postcss-loader",
        options: {
          postcssOptions: {
            ident: "postcss",
            syntax: "postcss-scss",
            plugins: ["postcss-import", "tailwindcss", "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:browser

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

ng config projects.<your-project>.architect.serve.builder @angular-builders/custom-webpack:dev-server

ng 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!

<div class="flex items-center justify-center flex-col h-screen">
  <h1 class="my-8 text-center text-6xl font-bold text-gray-700">
    <span class="text-teal-500">TailwindCSS
    </span > and <span class="text-red-600">Angular</span > is awesome!
  </h1>
  <p class="text-center text-3xl text-gray-700">Thanks for reading!</p>
</div>

Bonus: Purge Unused TailwindCSS Classes

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

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.