Tailwind CSS is one of those tools that’s difficult to impossible to live without once you’ve started using it. It’s independent of a specific framework, so it’s easy to install and use with any web development platform. Even this WordPress blog uses Tailwind CSS. Angular 11.2 and above supports Tailwind CSS, making it extremely easy to set up and use in Angular. This article will show you how to install and use Tailwind CSS in Angular using the steps outlined below.

• Create a new Angular project
• Install and configure Tailwind CSS

Create a new Angular project

First, let’s create a new Angular project and give it the name hello-world by running the Angular CLI command below.

ng new hello-world

Select SCSS as the stylesheet format to use.

Make sure that you are in the hello-world project root directory.

cd hello-world

Run the project and browse to http://localhost:4200 to ensure you have a working Angular project.

ng serve -o

You should now see the default landing page and is ready to install and use Tailwind CSS in Angular

Install and configure Tailwind CSS

Install Tailwind CSS.

npm install -D tailwindcss

Create the Tailwind CSS configuration file.

npx tailwindcss init

Open the tailwind.config.js file and set the paths to your HTML and js files.

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Open stylesheet.css and add the Tailwind CSS directives.

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

Tailwind CSS is now ready to use in your Angular project. To test if Tailwind CSS is working, open your app.component.html file and replace the contents with the following markup.

<div class="h-screen w-screen bg-sky-700 flex justify-center items-center">
  <div class="h-auto w-auto bg-sky-500 rounded-md text-white p-4">
    How to install and use Tailwind CSS in Angular
  </div>
  <router-outlet></router-outlet>
</div>

Build and run Angular and Tailwind CSS.

npm run start

Browse to http://localhost:4200 to view the Tailwind CSS styled screen.

If you feel in any way that this post was helpful, please consider buying me a coffee to help me create more blog posts, videos, and tutorials.

If you want to keep up to date with my latest posts, check out the list of posts on the home page and make sure that you follow icode4coffee on Facebook, Twitter and LinkedIn.