Field Sizing

Utility	Properties
Error: 429

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

Initial value

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 modifier

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

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

Hover modifier

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

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