How to Install Tailwind CSS in Angular?

Hi Guys,

In this example, you will learn how to install tailwind css in angular. I’m going to show you about how to add tailwind css in angular. This post will give you a simple example of angular install tailwind example. It's a simple example of angular add tailwind css. follow the below example for how to add tailwindcss to your angular application.

Tailwind is a CSS framework like bootstrap. using tailwind css use can create responsive website design. Tailwind css has it's own plugin to create designs for form, typography, line-clamp, aspect-ratio etc.

In this tutorial, I will show you step by step how to add tailwind css in your angular application. we will install tailwind css using tailwindcss postcss autoprefixer npm package. so you can follow the below step to set up tailwind css in your angular app.

You can use this solution with angular 8, angular 9, angular 10, angular 11, angular 12, angular 13, angular 14, angular 15, angular 16 and angular 17 version.

Step 1: Create New App

You can easily create your angular app using the below command:

ng new my-new-app

Step 2: Install Tailwind CSS

In this step, we will install the tailwind CSS npm package. so we can use tailwind CSS so let's install it by the following command:

npm install -D tailwindcss postcss autoprefixer

Step 3: Configure Tailwind CSS

After installed successfully, we need to configure tailwind CSS in your application.

Run below command and it will create tailwind.config.js file.

npx tailwindcss init

Next, we need to add paths on tailwind.config.js file as like below:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Step 4: Update styles.css

Next, we need to import tailwind css on style.css file as like below:

src/styles.css

/* You can add global styles to this file, and also import other style files */
@tailwind base;
@tailwind components;
@tailwind utilities;

Step 5: Update Component File

Now, we are ready to use tailwind css class, so you can update component file as like below:

src/app/app.component.html

<div class="flex justify-center">
  <p class="text-2xl">How to Install TailwindCSS In Angular? - ItSolutionStuff.com</p>
</div>
  
<div class="bg-green-300 border-green-600 border-b p-4 m-4 rounded">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Run Angular App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Angular app:

ng serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:4200

Output:

Install Tailwind CSS Plugins (Optional)

This is a optional step, but if you want to install some more tailwind css plugins then you can installed it. Here, i will show you, how to install Typography, Forms, Line-Clamp and Aspect-Ratio plugins by using below command:

npm install -D @tailwindcss/typography @tailwindcss/forms @tailwindcss/line-clamp @tailwindcss/aspect-ratio

Next, we need to add paths on tailwind.config.js file as like below:

tailwind.config.js

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

You are ready to use tailwind plugins.

Now, you can use all forms elements,s and later if you need to install more tailwind CSS plugins then you can use it.

I hope it can help you...