DEV Community

Cover image for Setting up TailwindCss in Angular
Sunil Joshi
Sunil Joshi

Posted on • Updated on • Originally published at wrappixel.com

Setting up TailwindCss in Angular

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?. Also if you are looking for free angular templates then these two sites WrapPixel and AdminMart 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
Enter fullscreen mode Exit fullscreen mode

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

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

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

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

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

This file comes with an empty setup:

module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}
Enter fullscreen mode Exit fullscreen mode

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


Sponsored:

Bootstrap


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

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

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/

Top comments (0)