Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lære Sizing and Visual Styling | Section
Tailwind CSS for React Development

Sizing and Visual Styling

Stryg for at vise menuen

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.

question mark

Which Tailwind CSS class is used to set the width of an element?

Vælg det korrekte svar

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 1. Kapitel 3

Spørg AI

expand

Spørg AI

ChatGPT

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores 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.

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 1. Kapitel 3
some-alt