custom-utilities

9 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

@utility directive for simple custom utilities

Tailwind v4 lets you register custom utility classes using the @utility directive instead of the v3 plugin API. Example: @utility content-auto { content-visibility: auto; } This can then be used as class="content-auto" and supports variants automatically, e.g. class="hover:content-auto". Custom utilities defined with @utility are automatically inserted into the utilities layer along with all built-in utilities.

Complex custom utilities with nesting

If a custom utility needs more than one CSS declaration/selector, use nesting inside @utility. Example: @utility scrollbar-hidden { &::-webkit-scrollbar { display: none; } }

@utility directive for custom utilities

Use the @utility directive to add custom utilities to your project that work with variants like hover, focus, and lg. Example: @utility tab-4 { tab-size: 4; }

grid-rows-(<custom-property>) custom property syntax

Use grid-rows-(<custom-property>) syntax to reference custom CSS properties. This applies grid-template-rows: var(<custom-property>).

opacity custom property values

The opacity utility supports custom CSS properties using the opacity-(<custom-property>) syntax, which generates opacity: var(<custom-property>);

@utility directive replaces @layer utilities

In v4, use the @utility directive to define custom utilities instead of @layer utilities. Custom utilities are sorted by the number of properties they define, allowing component utilities to be overwritten by other Tailwind utilities without additional configuration. Example: @utility tab-4 { tab-size: 4; }

@tailwindcss/line-clamp plugin for text truncation

@tailwindcss/line-clamp is an official Tailwind CSS plugin for truncating text to a specific number of lines. It can be installed via npm with 'npm install @tailwindcss/line-clamp' and added to the plugins array in tailwind.config.js.

Installing and configuring @tailwindcss/line-clamp

To use @tailwindcss/line-clamp, install the package with npm install @tailwindcss/line-clamp, then add require('@tailwindcss/line-clamp') to the plugins array in tailwind.config.js.

matchVariant plugin API for dynamic variants

The matchVariant API allows creating dynamic variants that support arbitrary values. Example: a placement-* variant for tooltips would be defined with matchVariant("placement", (value) => { return `&[data-placement=${value}]`; }, { values: { t: "top", r: "right", b: "bottom", l: "left" } }). This enables both predefined values (placement-t, placement-b) and arbitrary values (placement-[top-start]). You can provide a sort function to control CSS generation order.

Give your agent this brain