Width

@include('_partials.class-table', [ 'scroll' => true, 'rows' => $page->config['theme']['width']->map(function ($value, $name) { $class = ".w-{$name}"; $code = "width: {$value};"; $description = "Set the width of an element to {$value}."; return [$class, $code, $description]; }) ])

Auto

Use .w-auto to let the browser calculate and select the width for the element.

@component('_partials.code-sample')

@slot('code')@endslot @endcomponent

Screen Width

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

@component('_partials.code-sample', ['class' => 'overflow-x-scroll'])

@endcomponent

Fixed Width

Use .w-{number} or .w-px to set an element to a fixed width.

@component('_partials.code-sample') @foreach (collect([0 => '0', 'px' => '1px'])->union($page->config['theme']['spacing']->except(['0', 'px'])) as $name => $width)

@endforeach @slot('code') @foreach (collect([0 => '0', 'px' => '1px'])->union($page->config['theme']['spacing']->except(['0', 'px'])) as $name => $width)@endforeach @endslot @endcomponent

Fluid Width

Use .w-{fraction} or .w-full to set an element to a percentage based width.

@component('_partials.code-sample')

@endcomponent

Responsive

To control the width of an element at a specific breakpoint, add a {screen}: prefix to any existing width utility. For example, adding the class md:w-full to an element would apply the w-full utility at medium screen sizes and above.

For more information about Tailwind's responsive design features, check out the Responsive Design documentation.

@component('_partials.responsive-code-sample') @slot('none')

@endslot

@slot('sm')

@endslot

@slot('md')

@endslot

@slot('lg')

@endslot

@slot('xl')

@endslot

@slot('code')

@endslot @endcomponent

Customizing

Width scale

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 the spacing scale for padding, margin, width, and height all at once in the theme.spacing or theme.extend.spacing sections of your tailwind.config.js file:

@component('_partials.customized-config', ['key' => 'theme.extend.spacing'])

• '72': '18rem',
• '84': '21rem',
• '96': '24rem', @endcomponent

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

@component('_partials.customized-config', ['key' => 'theme.extend.width'])

• '1/7': '14.2857143%',
• '2/7': '28.5714286%',
• '3/7': '42.8571429%',
• '4/7': '57.1428571%',
• '5/7': '71.4285714%',
• '6/7': '85.7142857%', @endcomponent

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

@include('_partials.variants-and-disabling', [ 'utility' => [ 'name' => 'width', 'property' => 'width', ], 'variants' => [ 'responsive', ], ])