Add a custom utility

Tailwind v4 lets you define a utility in CSS:

@utility content-auto {
  content-visibility: auto;
}

You can now use content-auto in markup, including with variants:

<section class="content-auto lg:content-visible">...</section>

Tailwind inserts a registered utility into the utility layer, so it participates in variants and cascade ordering like built-in utilities. This is different from writing an unrelated class in an arbitrary stylesheet position.

Create a custom utility when all of these are true:

• the CSS behavior is useful in several places
• Tailwind does not already express it clearly
• the class has a narrow, property-focused meaning
• variants such as hover: or lg: should compose with it

Use an arbitrary property for a genuine one-off:

<div class="[content-visibility:auto]">...</div>

Promote it to @utility when repetition reveals a project-level vocabulary. If the value belongs to an existing family such as color, font, spacing, or breakpoint, a theme variable is usually the better extension point.

A component class is a different abstraction. .button-primary may combine layout, color, typography, and state because it represents a reusable interface concept. content-auto represents one CSS behavior. Do not hide a complete component inside a “utility” name.

Functional utilities can accept validated values, but they create a public styling API that the team must understand and maintain. Start with a simple fixed utility unless the value family is genuinely useful.

Your action is to use one arbitrary property twice, promote it to @utility, and apply a responsive variant. Then explain why it is a utility rather than a theme token or component class.