field-sizing
Utilities for controlling the sizing of form controls.
| Class | Styles |
|---|---|
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

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.
Copyright © 2026 Tailwind Labs Inc.·Trademark Policy