Sizing and Visual Styling
Pyyhkäise näyttääksesi valikon
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.
Oliko kaikki selvää?
Kiitos palautteestasi!
Osio 1. Luku 3
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
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.
Oliko kaikki selvää?
Kiitos palautteestasi!
Osio 1. Luku 3