How to add Tailwind css in Angular

Learn how to quickly and easily add Tailwind CSS to your Angular project! Our step-by-step guide will walk you through the process of setting up Tailwind with Angular.

In this article let’s understand how to add Tailwind css in angular application.

If you don’t have an application ready create one using below commands. Skip for existing project.

npm install -g @angular/cli

ng new myNewApp

Install the packages for Tailwind

Let’s install the Tailwind dependencies via angular using below commands

ng add ngx-tailwind

You will be asked few questions while install such as stylesheet type and modules to add. Choose css and all modules.

Above command will automatically do below points:

  • Generate tailwind.config.js
  • updates the styles.scss for injecting Tailwind modules
  • Add ngx-build-plus
  • Configures angular.json

Let’s add purge block to our existing config file. The final file should look like below.

You can add/modify many other configurations in this file such as dark/light mode, theme etc. Checkout official document for more options.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,ts}'],
  purge: ['./src/**/*.{html,ts}'],
  theme: {
    extend: {},
  },
  plugins: [require('@tailwindcss/aspect-ratio')
,require('@tailwindcss/forms')
,require('@tailwindcss/line-clamp')
,require('@tailwindcss/typography')
],
};

Out installation and configuration with Tailwind is done here. Now Lets take an example to check how to use it.

Apply Tailwind

Lets create two divs one as plain and one with Tailwind as below.

<div class="">
  Hello World
</div>

<div class="bg-yellow-300 border-green-800 border-b p-4 m-4 rounded">
  Hello World
</div>

Here is output how it looks in browser.

So, we have used these classes “bg-yellow-300 border-green-800 border-b p-4 m-4 rounded” which are basically self-explanatory just like bootstrap.

  • bg-yello-3000 : Will set yellow background , 300 will define the shade
  • border-green-800 : Will set green border on shade 800
  • border-b : Will set only bottom border
  • p-4 : 4 unit padding
  • m-4: 4 unit margin
  • rounded: for corner

Hope you were able to understand it easily on how to add Tailwind css in angular application

Read more articles on angular here.