How to install Tailwind CSS in Angular App?

Post author:Admin
Post published:August 30, 2023
Post category:Angular
Post comments:0 Comments

In this step by step tutorial I will show you How to install Tailwind CSS in an Angular App.

Tailwind CSS is a popular utility-first CSS framework that makes it easy to create responsive and stylish web designs. Combining Tailwind CSS with Angular, a powerful JavaScript framework for building web applications, can result in a seamless development experience. In this guide, we’ll walk you through the steps to install Tailwind CSS in an Angular project.

Before you get started make sure that you have Node.js & Angular CLI are installed in your system.

Table of Contents

Download Angular

First we will download Angular App. Enter below command to download angular.

ng new angular-tailwind

Installl Angular using ng new angular_tailwind

Enter y for creating routing file for the project

When the CLI asks you “which stylesheet format would you like to use?” choose CSS

Select CSS when you are asked which stylesheet format would you like to use?

Install Tailwind CSS

Now type cd project-name to go to the directory in which angular is installed.

type cd your-project-name to go to the directory

Now open your ptoject in your favorite IDE. I am using VS Code so I will open this project in VS Code.

Now open terminal in VS Code & type the below command to install Tailwind CSS.

npm install -D tailwindcss postcss autoprefixer

Now enter below command which will generate “tailwind.config.js” file.

npx tailwindcss init

Configuring your template paths

Tailwind utility classes are generated on demand when you actually use them in your code. So you need to tell Tailwind where to search for those utilities inside your project. Open the tailwind.config.js file and replace its content with the following:

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

configuring template paths in tailwind.config.js file

Add tailwind directives to your CSS

Now we need to add tailwind directives into our CSS file. Open src/styles.css and add below code inside it.

@tailwind base;
@tailwind components;
@tailwind utilities;

addign tailwind directives in styles.css

Start your build process

Now we need to run build process with ng serve. Here we need to use either Command prompt or Git Bash , if you use Windows Powershell you will get an error.

Run angular app to build process using ng serrve command

Start using tailwind css in your project

Now start using tailwind css utility classes inside your app. Open app.component.html file & replace the code with the below code.

<h1 class="text-3xl font-bold underline">
  Hello Angular
</h1>

Adding tailwind css classes into app.component.html file

Now go to your browser & type http://localhost:4200 & you will see “Hello Angular” text with tailwind CSS classes applied.

Hello Angular is displayed with tailwind classes applied

Conclusion

Integrating Tailwind CSS into your Angular project can streamline your web development workflow and help you create responsive and visually appealing user interfaces. By following these steps, you can easily install Tailwind CSS and start using its utility classes in your Angular components, making it simpler to style your web applications.