DEV Community

Brent Vanwildemeersch
Brent Vanwildemeersch

Posted on • Updated on

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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'),
          ]
        }
      }
    ]
  }
};
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

Setup Tailwind configuration

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

npx tailwind init
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

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)

Discussion (0)