Modern UI the Easy Way: Using Tailwind CSS with Angular

Introduction

As modern web applications grow in complexity, maintaining a consistent and scalable user interface becomes increasingly challenging. Angular offers a robust structure for building large-scale applications, but when it comes to styling, developers often find themselves juggling between custom CSS, component styles, and UI libraries. Enter Tailwind CSS—a utility-first CSS framework that offers a refreshing approach to building user interfaces directly within your templates.

In this article, we'll explore how to integrate Tailwind CSS into an Angular project and demonstrate its advantages through practical examples. Whether you're building a single-page application or a large enterprise dashboard, Tailwind can simplify your styling workflow and enhance your design consistency.

How to Install Tailwind in an Angular App

To get started, you need an Angular project (Angular 12+ is recommended). Tailwind CSS can be installed via npm and configured easily with PostCSS.

Step 1: Create or Navigate to Your Angular Project

ng new angular-tailwind-demo
cd angular-tailwind-demo

Step 2: Install Tailwind and Dependencies

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

This will generate a tailwind.config.js file in your project.

Step 3: Configure Tailwind to Work with Angular

In tailwind.config.js, configure the content paths to include Angular templates:

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

Step 4: Add Tailwind Directives to styles.css

Replace or update src/styles.css with:

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

Now, restart your dev server:

ng serve

You're ready to use Tailwind classes in your Angular templates.

Creating Reusable Components with Tailwind

Tailwind allows you to compose styles directly in the template, which improves readability and reduces the need for CSS files. Here's a basic example of a reusable Angular component styled with Tailwind:

button.component.html

<button class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded">
  Click Me
</button>

button.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-button',
  templateUrl: './button.component.html'
})
export class ButtonComponent {}

This approach keeps your design system inline with your components, making it easy to update and maintain.

Comparison: Tailwind vs Angular Material

Responsive Design with Tailwind Utilities

Tailwind makes responsive design intuitive with mobile-first utility classes. For example:

<div class="p-4 sm:p-6 md:p-8 lg:p-10 xl:p-12">
  Responsive Padding
</div>

This ensures the padding adjusts based on screen size without writing custom media queries. You can easily adapt layouts and typography using breakpoints like sm, md, lg, xl, and 2xl.

Real-World Example: Login Form

Here’s a simple login form using Tailwind in Angular:

<div class="max-w-sm mx-auto mt-10 p-6 bg-white rounded shadow">
  <h2 class="text-2xl font-bold mb-4">Login</h2>
  <form>
    <input class="w-full p-2 mb-4 border rounded" placeholder="Email" />
    <input class="w-full p-2 mb-4 border rounded" type="password" placeholder="Password" />
    <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded">
      Login
    </button>
  </form>
</div>

This form is visually appealing and fully responsive without writing a single line of CSS.

Conclusion

Tailwind CSS brings a utility-first approach to styling Angular applications, allowing developers to build custom, responsive, and maintainable UIs faster. By integrating Tailwind with Angular, you get the best of both worlds—a powerful front-end framework and a flexible styling toolkit. Whether you're prototyping or building a production-ready app, Tailwind can enhance your workflow and help you deliver consistent user experiences.

Thank's for your time, see you soon in another one :)