Sizing and Visual Styling

Tailwind provides utility classes to control element size and visual appearance.

Width and Height

<div className="w-64 h-32 bg-gray-200">
  Box
</div>

• w-64: sets width;
• h-32: sets height.

Borders

<div className="border border-gray-400">
  Content
</div>

• border: adds a border;
• border-gray-400: sets border color.

Rounded Corners

<div className="rounded-lg bg-blue-200">
  Content
</div>

rounded-lg: adds rounded corners.

Shadows

<div className="shadow-lg bg-white p-4">
  Card
</div>

shadow-lg: adds shadow for depth.

Use sizing and visual utilities to control dimensions and improve the appearance of elements.