Sizing and Visual Styling
Swipe to show menu
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.
Everything was clear?
Thanks for your feedback!
Section 1. Chapter 3
Ask AI
Ask AI
Ask anything or try one of the suggested questions to begin our chat
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.
Everything was clear?
Thanks for your feedback!
Section 1. Chapter 3