Tailwind CSS Course
Tailwind CSS
/
Beginner

Width

Definition

Utilities for setting the width of an element, including fixed widths, percentage widths, and viewport widths.

Explain Like I'm New

How wide something is. You can use the standard spacing scale (`w-16` for 4rem), fractions (`w-1/2` for 50%), or viewport units (`w-screen` for 100% of your monitor).

Real World Example

Creating a two-column layout by setting two sibling `div` elements to `w-1/2`.

Common Use Cases

  • •Sizing images
  • •Creating column layouts
  • •Full-width hero sections

Interactive Example

Interview Questions

basic

  • What Tailwind class makes an element span 100% of its parent's width?

intermediate

  • What is the difference between `w-full` and `w-screen`?

Flash Cards

Question

100% width?

Click to reveal answer
Answer

`w-full`

Question

full vs screen?

Click to reveal answer
Answer

`w-full` sets width to 100% of the PARENT container. `w-screen` sets width to 100vw (100% of the entire browser window), completely ignoring parent constraints.