Field Sizing

Controls the sizing of elements that have a default preferred size.

Utility	Properties
fs-f	`field-sizing: fixed;`
fs-c	`field-sizing: content;`

Content

This example sets the field sizing to fixed. The fs-f utility ensures that the field maintains a fixed size, regardless of the content within it.

Write a message:

<div class="d-f fd-c">
  <label class="mb-2">Write a message:</label>
  <textarea class="b-2 fs-c max-h-50 max-w-100 r-none rad-1"></textarea>
</div>

Fixed

This example sets the field sizing to content. The fs-c utility allows the field to size itself based on the content, adjusting its size dynamically to fit the content inside.

Write a message:

<div class="d-f fd-c">
  <label class="mb-2">Write a message:</label>
  <textarea class="b-2 fs-f max-h-50 max-w-100 r-none rad-1"></textarea>
</div>

Conditional styles

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Media modifiers

You can combine responsive breakpoints like sm:fs-*,md:fs-*, lg:fs-*, and xxl:fs-* allows targeting specific utilities in different viewports.

<div class="fs-f md:fs-c ..."></div>

Hover modifiers

Alternatively, you can apply :hover by using h:fs-* utility to override elements and change their values when hovering over them.

<div class="fs-f h:fs-c ..."></div>