Utility Classes Basics

Tailwind CSS provides small utility classes to control spacing, colors, and text styles directly in your markup.

Spacing

<div className="p-4 m-2">
  Content
</div>

• p-4: adds padding inside the element;
• m-2: adds margin outside the element.

Colors

<div className="bg-blue-500 text-white">
  Content
</div>

• bg-blue-500: sets background color;
• text-white: sets text color.

Text Styling

<p className="text-lg font-bold">
  Hello World
</p>

• text-lg: increases text size;
• font-bold: makes text bold.

Utility classes control one style at a time, and you combine them to build the final appearance.