Tailwind CSS is a highly customizable, Utility CSS framework that gives you all of the building blocks you need to build designs without any annoying opinionated styles you have to fight to override. Here we will show you, how you can set up Tailwind CSS in your Angular App.

In this article, we will be setting up tailwindCss in Angular 10. If you don’t have Angular 10 running on your local machine you can check out our tutorial – How to upgrade from Angular 9 to Angular 10. Also if you are looking for free angular 10 templates to boost the speed of a project you are doing or going to do in the future, download them from WrapPixel, They are under MIT License and free to use for Personal as well as Commercial use and comes with lifetime Free updates.

Prerequisite for Setting up Tailwind CSS in Angular

  • Basic understanding of HTML and CSS,
  • Basic understanding of Angular

Let’s write some codes

We will start by creating a new Angular project using the ng new a command followed by the name of the project:

ng new tailwind-angular

Running this command will prompt some questions. Choose scss for CSS styling framework.

After setting up an Angular project, We will need to install TailwindCss as a development dependency using this command:

npm install tailwindcss -D

To set up TailwindCss, We will need to set up various postcss packages for building Tailwind. We will also need the custom Angular web pack builder. To set this up run this in your terminal inside the project directory:

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

Installing these packages will also require some extra configs to work fine.

Create a webpack.config.js file in the root of your application and add the following codes inside the file:

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

Here we add some basic webpack rules so that we can run Sass in our application and also register TailwindCss as a plugin.

Now all our scss files will be recognized by Webpack and will be loaded by the postcss-loader package.

We need to tell our application to use the custom-builder to serve and build our application by running this command on our terminal:

ng config projects.tailwind-angular.architect.build.builder @angular-builders/custom-webpack:browser

ng config projects.tailwind-angular.architect.build.options.customWebpackConfig.path webpack.config.js

ng config projects.tailwind-angular.architect.serve.builder @angular-builders/custom-webpack:dev-server

ng config projects.tailwind-angular.architect.serve.options.customWebpackConfig.path webpack.config.js

For more information on how to configure your angular applications using the terminal, You could check out Angular’s official Documentation

Let’s start using TailwindCSS

To start using TailwindCss we need to create a config file, We can do this manually by creating a tailwind.config.js file in the root of your application or we could run this on our terminal to create one for us:

npx tailwindcss init

This file comes with an empty setup:

module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Tailwind CSS comes with id own default styles just like other CSS frameworks like Bootstrap and Materilizecss.

To start using the Tailwindcss styles and features we can import the Tailwindcss base, component, and utilities styles into our root src/styles.scss file:

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

With this done we can now start using Tailwindcss in our application. Let’s test it out. Edit the codes in the src/app/app.component.html file to this:

<section>
  <div class="container px-4 mt-5">
    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
      <strong class="font-bold">Tailwind CSS -----</strong>
      <span class="block sm:inline">Get your cool angular templates at <a href="https://www.wrappixel.com/">WrapPixel</a> </span>
      <span class="absolute top-0 bottom-0 right-0 px-4 py-3">
        <svg class="fill-current h-6 w-6 text-red-500" role="button" xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20">
          <title>Close</title>
          <path
            d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
        </svg>
      </span>
    </div>
    <div class="bg-indigo-900 text-center py-4 lg:px-4 mt-4">
      <div class="p-2 bg-indigo-800 items-center text-indigo-100 leading-none lg:rounded-full flex lg:inline-flex"
        role="alert">
        <span class="flex rounded-full bg-indigo-500 uppercase px-2 py-1 text-xs font-bold mr-3">New</span>
        <span class="font-semibold mr-2 text-left flex-auto">Get the coolest t-shirts from our brand new store</span>
        <svg class="fill-current opacity-75 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
          <path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z" /></svg>
      </div>
    </div>
  </div>
</section>
<router-outlet></router-outlet>

This might not work until you restart your application, So you could close your angular server and then restart it.

Preview TailwindCSS

To get all the Tailwindcss UI components you can head over to their official documentation at – https://tailwindcss.com/

If you are looking for Angular Admin Dashboard Template then you can check out below useful Admin Template which can save you time, money, and energy:

Modernize Angular 16 Material Dashboard

Angular has been a very popular framework among web developers. Here we have seen how to set up Tailwind CSS in Angular. Check out this for Angular Cheat Sheet.