From the course: Tailwind CSS 4 Essential Training

Unlock this course with a free trial

Join today to access over 24,800 courses taught by industry experts.

Setting width and height

Setting width and height - Tailwind CSS Tutorial

From the course: Tailwind CSS 4 Essential Training

Start my 1-month free trial Buy for my team

Setting width and height

“

- [Instructor] It's time to learn how to set widths and heights for our elements now. In this chapter, we'll use this connect card design and some variations of the same to learn all the layout related utility classes in Tailwind. Let's start with the HTML file connect-card.html. You can find this in the branch 02_01b. I have opened this in the browser too. The body is empty. So let's start with a single div. Let's say div, and let me add some text into this, and some background color so we can see it. So let's add a background, bg-indigo-500. I will refresh. By default, this div occupies 100% viewport width and auto height based on the content within. Let's change this using the width and height utility classes in Tailwind. The width utility classes start with w, usually followed by a number. You can see suggestions for a lot of numbers here, 0.51 and then there's 2, 3, 4. Of course, you will see even some letters like 2xs, 2xl. You can even use names if you wish, but actually you…

Contents