Summary  
This chapter covers how to use utility-based CSS classes to control element dimensions (width, height) and visual styling (borders, rounded corners, shadows).  

General domain of usage  
Front-end web development (UI styling)

Tailwind provides utility classes to control element size and visual appearance.


### Width and Height

```jsx
<div className="w-64 h-32 bg-gray-200">
  Box
</div>
```

* `w-64`: sets width;
* `h-32`: sets height.




### Borders

```jsx
<div className="border border-gray-400">
  Content
</div>
```

* `border`: adds a border;
* `border-gray-400`: sets border color.





### Rounded Corners

```jsx
<div className="rounded-lg bg-blue-200">
  Content
</div>
```

`rounded-lg`: adds rounded corners.



### Shadows

```jsx
<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.


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

Learn how to build and style modern interfaces with Tailwind CSS using utility classes and reusable UI patterns. Apply spacing, colors, layout, responsive rules, and interaction states to create clean React components and prepare for Next.js projects.

Sizing and Visual Styling

Width and Height

Borders

Rounded Corners

Shadows