Skip to content

Latest commit

 

History

History
181 lines (147 loc) · 5.67 KB

width.mdx

File metadata and controls

181 lines (147 loc) · 5.67 KB
title description
Width
Utilities for setting the width of an element.

import utilities from 'utilities?plugin=width' import { numbersFirst } from '@/utils/sortClasses' import { ArbitraryValues } from '@/components/ArbitraryValues' import { BreakpointsAndMediaQueries } from '@/components/BreakpointsAndMediaQueries' import { HoverFocusAndOtherStates } from '@/components/HoverFocusAndOtherStates'

export const classes = { utilities, sort: numbersFirst, }

Basic usage

Fixed widths

Use utilities like w-px, w-1, and w-64 to set an element to a fixed width.

<div class="flex justify-center">
  <div class="space-y-4 font-mono font-bold text-xs text-center text-white">
    <div class="px-4 py-2 bg-blue-500 rounded-lg shadow-lg w-96 hidden sm:block">w-96</div>
    <div class="px-4 py-2 bg-blue-500 rounded-lg shadow-lg w-80 hidden sm:block">w-80</div>
    <div class="px-4 py-2 bg-blue-500 rounded-lg shadow-lg w-64 hidden sm:block">w-64</div>
    <div class="px-4 py-2 bg-blue-500 rounded-lg shadow-lg w-48">w-48</div>
    <div class="px-4 py-2 bg-blue-500 rounded-lg shadow-lg w-40">w-40</div>
    <div class="px-4 py-2 bg-blue-500 rounded-lg shadow-lg w-32">w-32</div>
    <div class="px-4 py-2 bg-blue-500 rounded-lg shadow-lg w-24">w-24</div>
  </div>
</div>
<div class="**w-96** ...">w-96</div>
<div class="**w-80** ...">w-80</div>
<div class="**w-64** ...">w-64</div>
<div class="**w-48** ...">w-48</div>
<div class="**w-40** ...">w-40</div>
<div class="**w-32** ...">w-32</div>
<div class="**w-24** ...">w-24</div>

Percentage widths

Use utilities like w-full, w-1/2, and w-2/5 to set an element to a percentage based width.

<div class="space-y-4 font-mono font-bold text-xs text-white">
  <div class="flex space-x-4">
    <div class="w-1/2 px-4 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-1/2</div>
    <div class="w-1/2 px-4 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-1/2</div>
  </div>
  <div class="flex space-x-4">
    <div class="w-2/5 px-4 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-2/5</div>
    <div class="w-3/5 px-4 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-3/5</div>
  </div>
  <div class="flex space-x-4">
    <div class="w-1/3 px-4 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-1/3</div>
    <div class="w-2/3 px-4 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-2/3</div>
  </div>
  <div class="space-x-4 hidden sm:flex">
    <div class="w-1/4 px-4 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-1/4</div>
    <div class="w-3/4 px-4 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-3/4</div>
  </div>
  <div class="space-x-4 hidden sm:flex">
    <div class="w-1/5 px-4 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-1/5</div>
    <div class="w-4/5 px-4 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-4/5</div>
  </div>
  <div class="space-x-4 hidden sm:flex">
    <div class="w-1/6 px-4 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-1/6</div>
    <div class="w-5/6 px-4 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-5/6</div>
  </div>
  <div class="w-full px-4 py-2 bg-violet-500 rounded-lg shadow-lg text-center text-white font-mono">w-full</div>
</div>
<div class="flex ...">
  <div class="**w-1/2** ... ">w-1/2</div>
  <div class="**w-1/2** ... ">w-1/2</div>
</div>
<div class="flex ...">
  <div class="**w-2/5** ...">w-2/5</div>
  <div class="**w-3/5** ...">w-3/5</div>
</div>
<div class="flex ...">
  <div class="**w-1/3** ...">w-1/3</div>
  <div class="**w-2/3** ...">w-2/3</div>
</div>
<div class="flex ...">
  <div class="**w-1/4** ...">w-1/4</div>
  <div class="**w-3/4** ...">w-3/4</div>
</div>
<div class="flex ...">
  <div class="**w-1/5** ...">w-1/5</div>
  <div class="**w-4/5** ...">w-4/5</div>
</div>
<div class="flex ...">
  <div class="**w-1/6** ...">w-1/6</div>
  <div class="**w-5/6** ...">w-5/6</div>
</div>
<div class="**w-full** ...">w-full</div>

Viewport width

Use w-screen to make an element span the entire width of the viewport.

<div class="**w-screen**">
  <!-- ... -->
</div>

Resetting the width

The w-auto utility can be useful if you need to remove an element's assigned width under a specific condition, like at a particular breakpoint:

<div class="w-full md:w-auto">
  <!-- ... -->
</div>

Applying conditionally

Hover, focus, and other states

Breakpoints and media queries

Using custom values

Customizing your theme

By default, Tailwind's width scale is a combination of the default spacing scale as well as some additional values specific to widths.

You can customize your spacing scale by editing theme.spacing or theme.extend.spacing in your tailwind.config.js file.

  module.exports = {
    theme: {
      extend: {
+       spacing: {
+         '128': '32rem',
+       }
      }
    }
  }

To customize width separately, use the theme.width section of your tailwind.config.js file.

  module.exports = {
    theme: {
      extend: {
+       width: {
+         '128': '32rem',
+       }
      }
    }
  }

Learn more about customizing the default theme in the theme customization documentation.

Arbitrary values