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.

Everything was clear?

Thanks for your feedback!

Section 1. Chapter 6

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Building UI Components

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