rembrembdocs

field-sizing

Utilities for controlling the sizing of form controls.

ClassStyles
field-sizing-fixed
field-sizing: fixed;

| | field-sizing-content |

field-sizing: content;

|

Use the field-sizing-content utility to allow a form control to adjust its size based on the content:

Type in the input below to see the size change

Latex Salesman, Vanderlay Industries

<textarea class="field-sizing-content ..." rows="2">  Latex Salesman, Vanderlay Industries</textarea>

Use the field-sizing-fixed utility to make a form control use a fixed size:

Type in the input below to see the size remain the same

Latex Salesman, Vanderlay Industries

<textarea class="field-sizing-fixed w-80 ..." rows="2">  Latex Salesman, Vanderlay Industries</textarea>

Prefix a field-sizing utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<input class="field-sizing-content md:field-sizing-fixed ..." />

Learn more about using variants in the variants documentation.

On this page

Build UIs that don’t suck — 5-day mini-course

5-day mini-course

Build UIs that don’t suck.

Short, tactical video lessons from the creator of Tailwind CSS, delivered directly to your inbox every day for a week.

Get the free course

Copyright © 2026 Tailwind Labs Inc.·Trademark Policy