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.

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 1. Kapitel 6

Fråga AI

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Building UI Components

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