🤩
Windframe Import update is finally here!
postImage

How to use Tailwind css Width

blogImage

By Emmanuel Chinonso

Web Developer

What is Tailwind Width?

Tailwind's width scale is a mixture of the normal spacing scale and certain width-specific parameters by default.

Utilities are required to set up the Tailwind css width. Below is a table for Tailwind CSS width classes and properties

ClassProperties
w-0width: 0px;
w-pxwidth: 1px;
w-0.5width: 0.125rem; / 2px /
w-1width: 0.25rem; / 4px /
w-1.5width: 0.375rem; / 6px /
w-2width: 0.5rem; / 8px /
w-2.5width: 0.625rem;/10px/
w-3width: 0.75rem; / 12px/
w-3.5width: 0.875rem; / 14px/
w-4width: 1rem; / 16px /
w-5width: 1.25rem; / 20px /
w-6width: 1.5rem; / 24px /
w-7width: 1.75rem; / 28px /
w-8width: 2rem; / 32px /
w-9width: 2.25rem; / 36px /
w-10width: 2.5rem; / 40px /
w-11width: 2.75rem; / 44px /
w-12width: 3rem; / 48px /
w-14width: 3.5rem; / 56px /
w-16width: 4rem; / 64px /
w-20width: 5rem; / 80px /
w-24width: 6rem; / 96px /
w-28width: 7rem; / 112px /
w-32width: 8rem; / 128px /
w-36width: 9rem; / 144px /
w-40width: 10rem; / 160px /
w-44width: 11rem; / 176px /
w-48width: 12rem; / 192px /
w-52width: 13rem; / 208px /
w-56width: 14rem; / 224px /
w-60width: 15rem; / 240px /
w-64width: 16rem; / 256px /
w-72width: 18rem; / 288px /
w-80width: 20rem; / 320px /
w-96width: 24rem; / 384px /
w-autowidth: auto;
w-1/2width: 50%;
w-1/3width: 33.333333%;
w-2/3width: 66.666667%;
w-1/4width: 25%;
w-2/4width: 50%;
w-3/4width: 75%;
w-1/5width: 20%;
w-2/5width: 40%;
w-3/5width: 60%;
w-4/5width: 80%;
w-1/6width: 16.666667%;
w-2/6width: 33.333333%;
w-3/6width: 50%;
w-4/6width: 66.666667%;
w-5/6width: 83.333333%;
w-1/12width: 8.333333%;
w-2/12width: 16.666667%;
w-3/12width: 25%;
w-4/12width: 33.333333%;
w-5/12width: 41.666667%;
w-6/12width: 50%;
w-7/12width: 58.333333%;
w-8/12width: 66.666667%;
w-9/12width: 75%;
w-10/12width: 83.333333%;
w-11/12width: 91.666667%;
w-fullwidth: 100%;
w-screenwidth: 100vw;
w-minwidth: min-content;
w-maxwidth: max-content;
w-fitwidth: fit-content;

Changing the width of an element in Tailwind is as easy as changing the value of the width class you want to change.

Syntax

javascript
<element class="w-0">...</element>

Fixed Tailwind Width

html
<div class="flex">
<div class="w-1/2 bg-purple-600 h-12 rounded-l-lg">
w-1/2
</div>
<div class="w-1/2 bg-purple-300 h-12 rounded-r-lg">
w-1/2
</div>
</div>
<div class="flex ...">
<div class="w-2/5 bg-purple-600 h-12 rounded-l-lg">
w-2/5
</div>
<div class="w-3/5 bg-purple-300 h-12 rounded-r-lg">
w-3/5
</div>
</div>
<div class="flex ...">
<div class="w-1/3 bg-purple-600 h-12 rounded-l-lg">
w-1/3
</div>
<div class="w-2/3 bg-purple-300 h-12 rounded-r-lg">
w-2/3
</div>
</div>
<div class="flex ...">
<div class="w-1/4 bg-purple-600 h-12 rounded-l-lg">
w-1/4
</div>
<div class="w-3/4 bg-purple-300 h-12 rounded-r-lg">
w-3/4
</div>
</div>
<div class="flex ...">
<div class="w-1/5 bg-purple-600 h-12 rounded-l-lg">
w-1/5
</div>
<div class="w-4/5 bg-purple-300 h-12 rounded-r-lg">
w-4/5
</div>
</div>
<div class="flex ...">
<div class="w-1/6 bg-purple-600 h-12 rounded-l-lg">
w-1/6
</div>
<div class="w-5/6 bg-purple-300 h-12 rounded-r-lg">
w-5/6
</div>
</div>
<div class="w-full bg-purple-300 h-12 rounded-lg">
w-full
</div>
w-1/2
w-1/2
w-2/5
w-3/5
w-1/3
w-2/3
w-1/4
w-3/4
w-1/5
w-4/5
w-1/6
w-5/6
w-full

Tailwind Min-Width

The min-width property specifies the minimum width of an element. It prevents the width property's utilized value from being smaller than the min-width value.

ClassProperties
min-w-0min-width: 0px;
min-w-fullmin-width: 100%;
min-w-minmin-width: min-content;
min-w-maxmin-width: max-content;
min-w-fitmin-width: fit-content;

When the Tailwind min-width is greater than max-width or width, the element's width is set to min-width. If the content is shorter than the minimal width, the minimum width will be used. If the content is bigger than the minimal width, the min-width property has no impact. This prevents the width property's value from being less than min-width.

min-w-full
min-w-0
min-w-max
min-w-fit
min-w-mini

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast

Related Posts

Comments

...