Setting up TailwindCss in Angular
Tags: angular, javascript, webdev, css
Published: 2020-09-09 06:05:22

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.

In this article we will be setting up tailwindCss in Angular. If you dont have latest Angular running on your local machine you can check out our tutorial - [How to upgrade from Angular?](https://blog.wrappixel.com/angular-upgrade/?ref=232). Also if you are looking for free angular templates then these two sites [WrapPixel](https://www.wrappixel.com/templates/category/angular-templates/?ref=232) and [AdminMart](https://adminmart.com/?ref=6) will be helpful to boost speed of project you are doing or going to do in future, They are under MIT License, Free to use for Personal as well as Commercial use and comes with lifetime Free updates.


## Prerequisite
- Basic understanding of HTML and CSS,
- Basic understanding of Angular

Lets write some codes

We will start by creating a new Angular project using the `ng new` 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 setup TailwindCss, We will need to setup various `postcss` packages for building Tailwind. We will also need the custom Angular webpack 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 this 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 checkout the [Angular’s official Documentation](https://angular.io/cli/config)

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: [],
    }
    

TailwindCss comes with id own default styles just like other CSS frameworks like [Bootstrap](https://www.getbootstrap.com) and Materilizecss.

---

### Sponsored:

[![Bootstrap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8973tqmybfagaacsfnff.jpg)](https://adminmart.com/templates/bootstrap/?ref=6)

---


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](https://www.wrappixel.com/demos/images/tailwind-css-wrappixel.png)


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