Tailwind CSS - Width

---

---

Tailwind CSS Width is a utility class that provides an effective way of handling the content width. This is used to set the width or manipulate the width of any HTML elements.

Tailwind CSS Width Classes

The following is the list of Tailwind CSS Width Classes that provides an effective way of handling content width.

Functionality of Tailwind CSS Width Classes

• w-*: This specifies the width and can set a specific length. The * can be replaced with any acceptable value mentioned in the table.
• min-px: This specifies the width as a 1px value.
• w-auto: This specifies the width is set according to the content
• w-1/2: This specifies the width is set to half of the window.
• w-1/3: This specifies the width is set to one-third of the window.
• w-1/4: This specifies the width is set to one-fourth of the window.
• w-1/5: This specifies the width is set to one-fifth of the window.
• w-1/6: This specifies the width is set to one-sixth of the window.
• w-1/12: This specifies the width is set to one-twelfth of the window.
• w-full: This specifies the width is set to full.
• w-screen: This specifies the width is set to the screen size.
• w-svh: This class sets the width of the element 100 svw.
• w-lvh: This class sets the width of the element 100 lvh.
• w-dvh: This class sets the width of the element 100 ,dvh
• w-min: This class is used to specify the min-width.
• w-max: This class is used to specify the max-width.
• w-fit: This class sets the width to fit the content into the parent.

Tailwind CSS Width Class Examples

The following examples will illustrate the Tailwind CSS Width class utility.

Define Fixed Width

To define a fixed width, we can use classes like 'w-px', 'w-1', and 'w-24' classes. Any valid numeric value(w-*) can be used from the above table to create a fixed width element.

Example

Here in this example, we will create multiple elements and set different fixed widths on each element.

    



    

        Tailwind CSS Width Class
    
        
w-44
        
w-40
        
w-36
        
w-32
        
w-28
        
w-24

Specifying Percentage Width

To specify width in percentage means the width of that element will totally depends on the width of of the parent element. By using 'w-full', 'w-1/2', and 'w-2/5' we can set element width.

Example

Here in this example, we will create multiple elements and set different percentage widths on each element.

    



    

        Tailwind CSS Width Class
    
        
w-1/12
        
w-2/12
        
w-3/12
        
w-4/12
        

Define Width Based on Viewport Width

To set the width of an element based on viewport width, we can use the 'w-screen' class. This will auto-adjust the width of your element based on the viewport.

Example

Here in this example we will create two elements, in the first element we will use the 'w-screen' class and leave the second one blank.

    



    

        Tailwind CSS Width Class
    
        
w-1/12
        

Full Width Based on Hover

To set the element width full on hover can be achieved by using 'hover' class. But you have to keep one thing in mind that only full width is possible.

Example

Here in this example, we have created an element that takes the full width on hover.

    



    

        Tailwind CSS Width Class
    
        

        

            Hover over Me