creating-custom-utilities

Create custom utilities using the @utility directive in Tailwind v4. Define static utilities for simple values, functional utilities with --value macros for parameterized output, and multi-value utilities combining multiple CSS properties. Apply them across variants like hover, focus, and responsive breakpoints to extend your design system.

Yes. Extend Tailwind-based projects by defining @utility patterns that generate additional utility classes. You can reference theme tokens, use --value(integer) and --value(--color-*) macros, and create arbitrary values with content for pseudo-elements, all while maintaining variant support.

Static utilities are simple, reusable classes for fixed values. Functional utilities accept parameters through --value tokens, letting you create scalable utilities like text-stroke-* that generate multiple class variants from a single pattern definition.

The @utility directive enables variant-aware output, automatically applying your custom utilities across hover, focus, and responsive breakpoints. This generates complete utility families without manually writing each variant combination.

Yes. Custom utilities support theme references, allowing you to build utilities that pull colors, spacing, and other design tokens from your Tailwind configuration. Combine this with --value macros to create theme-aware, parameterized utilities.

Use multi-value utilities when you need to set multiple CSS properties together consistently, like text-stroke utilities that combine stroke width and color. This reduces class bloat and keeps related properties synchronized across your design system.