Setting up TailwindCss in Angular 10

Setting up TailwindCss in Angular 10

Sunil Joshi's photo
Sunil Joshi
·

7 min read

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 10. If you dont 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 speed of project you are doing or going to do in future, download it from WrapPixel, 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

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 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 - tailwindcss.com

AngularJavaScriptjavascript frameworkTailwind CSS2Articles1Week