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

Sizing and Visual Styling

Svep för att visa menyn

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änligen välj det korrekta svaret

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 1. Kapitel 3

Fråga AI

expand

Fråga AI

ChatGPT

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

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 allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 1. Kapitel 3
some-alt