SDA101 - User Interface Design and Implementation

Colors and Images

Colors

Tailwind provides a default color palette, but it's customizable.
Use color classes for text (text-), background (bg-), border (border-), etc.
Colors include gray, red, yellow, green, blue, indigo, purple, and more.
Each color has shades from 50 to 900.

Example:

<div class="bg-blue-500 text-white">Blue background, white text</div>

Images

Control image sizing with w- and h- classes.
Use object-cover, object-contain, object-fill for image fitting.
Control image repetition with bg-repeat, bg-no-repeat, bg-repeat-x, bg-repeat-y.

Example:

<img class="w-full h-48 object-cover" src="image.jpg" alt="Description">

Controlling Height and Width

Width

Set width using classes like w-1/2, w-full, w-screen, or specific sizes like w-64.
Use max-w- classes to set maximum width.

Example:

<div class="w-1/2 max-w-md">Half width, max 448px</div>

Height

Set height using classes like h-1/2, h-full, h-screen, or specific sizes like h-64.
Use max-h- classes to set maximum height.

Example:

<div class="h-screen">Full viewport height</div>

Example:

<div class="h-screen">Full viewport height</div>