Style User Management App with Tailwind CSS - Angular and Tailwind

we add basic styling to the User Management project using Tailwind CSS.

The goal is not high-quality UI, but to understand how Tailwind classes are used in Angular.


What we will style

  1. User List UI
  2. Add User Form
  3. Edit User Form
  4. Buttons and Inputs


Styling User List Container

We apply styles to the main wrapper div.

Tailwind classes used:

  1. max-w-lg → max width
  2. shadow-md → shadow
  3. m-4 → margin
  4. p-4 → padding
  5. rounded-lg → rounded corners


Example:

<div class="max-w-lg shadow-md m-4 p-4 rounded-lg">


Styling User List (ul)

Add spacing and text color.

<ul class="space-y-2 text-gray-700">
  1. space-y-2 → vertical spacing
  2. text-gray-700 → text color


Align Label & Value using Flex

Each list item uses flex + justify-between.

<li class="flex justify-between">
<span>Name</span>
<span>{{user.name}}</span>
</li>

Same pattern used for:

  1. Age
  2. Email
  3. ID


Styling Heading (User List)

<h1 class="text-2xl text-orange-600 text-center">
User List
</h1>
  1. text-2xl → font size
  2. text-orange-600 → color
  3. text-center → center align


Button Styling (Delete & Edit)

Buttons reused from user list.

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

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


Styling Add User Form

Same wrapper style reused.

<div class="max-w-lg shadow-md m-4 p-4 rounded-lg">

Input Field Styling

<input
class="w-full border border-gray-300 rounded px-3 py-2 mb-4"
type="text"
placeholder="Enter Name"
/>

Classes meaning:

  1. w-full → full width
  2. border → border
  3. border-gray-300 → border color
  4. rounded → rounded input
  5. px-3 py-2 → padding
  6. mb-4 → margin bottom

Same style used for email and age inputs.


Styling Add / Update Button

<button class="bg-green-500 text-white p-2 rounded-md cursor-pointer">
Add User
</button>

Color can be changed as needed.