Building UI Components

Tailwind allows you to quickly build common UI components using utility classes.

Button

<button className="px-4 py-2 bg-blue-500 text-white rounded-lg">
  Click me
</button>

• px-4 py-2: adds padding;
• bg-blue-500: sets background color;
• text-white: sets text color;
• rounded-lg: adds rounded corners.

Card

<div className="p-4 bg-white shadow-lg rounded-lg">
  <h3 className="text-lg font-bold">Title</h3>
  <p className="text-gray-600">Description</p>
</div>

• p-4: adds padding;
• shadow-lg: adds shadow;
• rounded-lg: rounds corners.

Form Input

<input
  className="border border-gray-300 p-2 rounded-md"
  placeholder="Enter text"
/>

• border: adds border;
• p-2: adds padding;
• rounded-md: rounds corners.

Combine utility classes to build reusable UI components like buttons, cards, and form elements.