How to use TailwindCSS in Angular

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

#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'),
          ]
        }
      }
    ]
  }
};

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

• 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)