Building a Responsive Angular UI with TailwindCSS

Introduction

Angular gives you a solid framework for building scalable applications, but styling can sometimes feel repetitive. That’s where TailwindCSS comes in. It’s a utility-first CSS framework that helps you build responsive, modern designs directly in your templates without writing tons of custom CSS.

Today, we’ll set up TailwindCSS in an Angular project and create a responsive layout with a navbar and a simple card grid.

Step 1: Create a New Angular Project

If you don’t already have Angular installed:

npm install -g @angular/cli

Create a new project:

ng new angular-tailwind
cd angular-tailwind

Step 2: Install TailwindCSS

Inside your Angular project, install TailwindCSS:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

This creates a tailwind.config.js file.

Step 3: Configure TailwindCSS

Update your tailwind.config.js to include Angular’s template paths:

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

Now, add Tailwind directives to your src/styles.css:

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

Step 4: Run Your App

Start the Angular dev server:

ng serve

At this point, TailwindCSS is working. You can test by editing app.component.html:

<h1 class="text-3xl font-bold text-blue-600">Hello Tailwind in Angular 🚀</h1>

Step 5: Build a Responsive Layout

Now, let’s make a simple UI: a navbar and a card grid.

Navbar (app.component.html)

<nav class="bg-blue-600 p-4 text-white flex justify-between items-center">
  <div class="text-xl font-bold">MyApp</div>
  <ul class="flex space-x-4">
    <li><a href="#" class="hover:text-gray-200">Home</a></li>
    <li><a href="#" class="hover:text-gray-200">About</a></li>
    <li><a href="#" class="hover:text-gray-200">Contact</a></li>
  </ul>
</nav>

Card Grid

<div class="p-6 grid gap-6 grid-cols-1 md:grid-cols-3">
  <div class="bg-white p-4 rounded-xl shadow hover:shadow-lg transition">
    <h2 class="text-lg font-bold">Card 1</h2>
    <p class="text-gray-600">This is a sample card styled with TailwindCSS.</p>
  </div>
  <div class="bg-white p-4 rounded-xl shadow hover:shadow-lg transition">
    <h2 class="text-lg font-bold">Card 2</h2>
    <p class="text-gray-600">Tailwind makes it easy to build UI quickly.</p>
  </div>
  <div class="bg-white p-4 rounded-xl shadow hover:shadow-lg transition">
    <h2 class="text-lg font-bold">Card 3</h2>
    <p class="text-gray-600">Utility classes keep your code clean.</p>
  </div>
</div>

Step 6: Make it Responsive

Tailwind makes responsive design super simple. For example, we already used md:grid-cols-3 above, which means:

• Mobile: 1 column

• Medium screens (tablet+): 3 columns

You can also adjust padding, text sizes, or visibility with sm:, md:, lg:, xl: prefixes. Example:

<h1 class="text-2xl md:text-4xl font-bold">Responsive Heading</h1>

Conclusion

That’s it! 🎉 You’ve successfully integrated TailwindCSS into Angular and built a simple responsive UI. This setup gives you the best of both worlds: Angular’s structure + Tailwind’s speed in building modern, responsive layouts.

From here, you can add more pages, components, or even connect it with the NestJS API we built in the first article.