Tailwind CSS Setup & Styling in Angular

Tailwind CSS is a utility-first CSS framework.

It does not give ready-made components like buttons or navbar.

It only provides predefined CSS classes.

Why use Tailwind CSS

  1. No default styles
  2. Full control using classes
  3. Faster UI styling
  4. Classes are already created, just use them


Tailwind CSS Installation (Angular)

  1. Open Tailwind CSS website
  2. Go to Docs → Installation
  3. Select Angular
  4. Follow Angular framework steps
  5. Skip new Angular app step (project already exists)

Run command in terminal:

npm install -D tailwindcss postcss autoprefixer


Create PostCSS config file

Create file at root level:

.postcssrc.json

Add this code:

{
"plugins": {
"tailwindcss": {},
"autoprefixer": {}
}
}


Import Tailwind in styles.css

In styles.css, add at the top:

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


Restart Angular App

Run:

ng serve

If app was already running, restart it.


How to check Tailwind is working

  1. Default button styles disappear
  2. Inputs look plain
  3. No borders or spacing by default

This means Tailwind is active.


Using Tailwind Classes (Example)

Heading Style


<h1 class="text-3xl text-orange-500 p-2 font-bold">
User Management
</h1>
  1. text-3xl → text size
  2. text-orange-500 → text color
  3. p-2 → padding
  4. font-bold → bold text


Button Styling Example

Delete Button

<button class="bg-red-500 text-white p-1 rounded-md m-1 cursor-pointer">
Delete
</button>

Edit Button

<button class="bg-orange-500 text-white p-1 rounded-md m-1 cursor-pointer">
Edit
</button>


Useful Tailwind Classes

  1. bg-* → background color
  2. text-* → text color
  3. p-* → padding
  4. m-* → margin
  5. rounded-* → border radius
  6. flex → flex layout
  7. cursor-pointer → hand cursor