Tailwind CSS Width Tutorial for Beginners

Controlling width is one of the most important skills in layout design. Whether you are building cards, forms, navigation bars, or full-page sections — width utilities help you structure your layout properly.

In this tutorial, you will learn:

How to set fixed width
How to use percentage-based width
How to use container-based widths
How to match viewport width
How to set both width and height together
How to use responsive width

Let’s start step by step.

What is Width in CSS?

Width defines how wide an element should be.

Traditional CSS:

width: 300px;

In Tailwind CSS, you use utility classes directly inside HTML.

Example:

<div class="w-64"></div>

This is faster and keeps your CSS clean.

Setting Fixed Width Using Spacing Scale

Tailwind provides width values based on its spacing system.

Syntax:

w-<number>

Example:

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-10">

  <div class="w-64 bg-blue-500 text-white p-4 mb-4">w-64</div>
  <div class="w-48 bg-green-500 text-white p-4 mb-4">w-48</div>
  <div class="w-32 bg-red-500 text-white p-4">w-32</div>

</body>
</html>

Here:

w-32 = 8rem
w-48 = 12rem
w-64 = 16rem

These values follow Tailwind’s spacing scale.

Using Percentage-Based Width

If you are working with flexible layouts, percentage width is very useful.

Tailwind provides fraction utilities like:

w-1/2
w-1/3
w-2/3
w-1/4
w-3/4
w-full

Example:

<div class="flex gap-4">
  <div class="w-1/2 bg-indigo-500 text-white p-4">w-1/2</div>
  <div class="w-1/2 bg-purple-500 text-white p-4">w-1/2</div>
</div>

This creates a two-column layout.

Another example:

<div class="flex gap-4 mt-6">
  <div class="w-1/3 bg-pink-500 text-white p-4">1/3</div>
  <div class="w-2/3 bg-teal-500 text-white p-4">2/3</div>
</div>

Use w-full to make an element take 100% width.

Using Container-Based Width

Tailwind provides predefined container sizes:

w-xs
w-sm
w-md
w-lg
w-xl
w-2xl
w-3xl

Example:

<div class="w-lg bg-gray-800 text-white p-6">
  Container-based width (w-lg)
</div>

These are useful when building content sections or cards with consistent maximum width.

Matching the Viewport Width

Sometimes you want the element to take the full screen width.

Use:

w-screen

Example:

<div class="w-screen bg-blue-600 text-white p-6">
  Full viewport width
</div>

You can also use advanced viewport units:

w-dvw (dynamic viewport width)
w-lvw (large viewport width)
w-svw (small viewport width)

These are helpful for mobile browsers.

Resetting Width

If you want to remove width at a specific breakpoint:

<div class="w-full md:w-auto bg-gray-700 text-white p-6">
  Full width on mobile, auto on desktop
</div>

This follows mobile-first design.

Setting Both Width and Height Together (size Utility)

Tailwind provides size utilities to control width and height at the same time.

Example:

<div class="size-24 bg-indigo-500 text-white flex items-center justify-center">
  size-24
</div>

This sets:

width: 6rem
height: 6rem

Other examples:

size-16
size-32
size-full

You can also use:

<div class="size-full"></div>

This sets both width and height to 100%.

Using Custom Width Values

If predefined values are not enough, you can use custom values.

Example:

<div class="w-[350px] bg-gray-900 text-white p-6">
  Custom width 350px
</div>

You can also use CSS variables:

<div class="w-(--my-width)">
  Custom width using CSS variable
</div>

This is useful in advanced design systems.

Responsive Width in Tailwind CSS

Tailwind uses a mobile-first approach.

Example:

<div class="w-full md:w-1/2 lg:w-1/3 bg-teal-600 text-white p-6">
  Responsive width example
</div>

Explanation:

Mobile → full width
Medium screens → 50% width
Large screens → 33% width

This is commonly used in card grids.

Best Practices for Beginners

If you are learning Tailwind CSS:

Use w-full for responsive layouts
Use fraction utilities for grid-style layouts
Use container widths for structured content
Avoid too many fixed pixel widths
Always test your layout on mobile

Frequently Asked Questions (FAQ)

What does w-full mean in Tailwind CSS?

w-full means width: 100%.

How do I create two equal columns?

Use:

<div class="flex">
  <div class="w-1/2"></div>
  <div class="w-1/2"></div>
</div>

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

w-full = 100% of parent w-screen = 100% of viewport width

How do I apply width only on desktop?

Use a breakpoint:

lg:w-1/2

0 likes

Your Feedback

Help us improve by sharing your thoughts

Previous: Tailwind CSS Margin Tutorial for Beginners (With Examples)

Next: Tailwind CSS Height Tutorial for Beginners

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Terms Disclaimer About Us Contact Us