new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Tailwind CSS v4 · all subjects

@theme and @utility directives

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

New @container-size utility in v4.3

Tailwind CSS v4.3 adds @container-size utility which creates a size container instead of an inline-size container. Size containers expose block-size information needed for container query length units like cqb and cqh. Named size containers can be created using @container-size/{name} syntax, similar to @container/{name}.

Stacked @variant support in v4.3

Tailwind CSS v4.3 adds support for stacked variants in CSS. Stacked variants allow combining multiple variants like @variant hover:focus, which compiles to nested hover and focus selectors with appropriate media queries.

Compound @variant support in v4.3

Tailwind CSS v4.3 adds support for compound variants in CSS. Compound variants allow sharing the same CSS block across multiple variants using syntax like @variant hover, focus, eliminating duplication when the same styles apply to multiple states.

Default values for functional utilities in v4.3

Tailwind CSS v4.3 allows passing --default(…) to --value(…) and --modifier(…) in functional @utility definitions. This enables utilities to work with or without a value. For example, @utility tab-* { tab-size: --value(integer, --default(4)); } allows both bare tab (defaults to 4) and tab-2 (explicitly 2).

Stacked variant CSS example

Example of stacked @variant in CSS: @variant hover:focus { background: var(--color-sky-600); } compiles to nested &:hover { @media (hover: hover) { &:focus { background: var(--color-sky-600); } } }

Compound variant CSS example

Example of compound @variant in CSS: @variant hover, focus { background: var(--color-sky-600); } compiles to separate &:hover and &:focus blocks, both containing the shared background property.

Default values functional utility example

Example of functional utility with default value: @utility tab-* { tab-size: --value(integer, --default(4)); } generates .tab { tab-size: 4; } for bare tab and .tab-2 { tab-size: 2; } for tab-2.

Container size utilities syntax

To use size containers in v4.3: <div class="@container-size"><div class="h-[50cqb]">...</div></div>. Named size containers use @container-size/{name} syntax, same as @container/{name} for inline-size containers.

Give your agent this brain