Adding Custom Styles

Arbitrary values put anything in brackets: top-[117px], grid-cols-[1fr_200px] (underscore = space; \_ keeps one) or bg-(--brand), short for bg-[var(--brand)]; hint ambiguous types with text-(length:--size). Arbitrary properties ([mask-type:luminance]) cover CSS with no utility, and arbitrary variants ([&>li:nth-child(2)]:text-pink-600) write selectors inline.

Once a pattern repeats, move it to CSS. @utility registers a utility that works with every variant, and --value() makes it take a value; @custom-variant names a selector; @variant applies a variant inside your own rules; and @apply inlines utilities into a class kept in @layer components, so utilities still override it:

A functional @utility, a custom variant, @apply and arbitrary valuesHTMLLive

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
  @utility stripes-* {
    background: repeating-linear-gradient(45deg, --value(--color-*) 0 6px, transparent 6px 12px);
  }
  @custom-variant midnight (&:where([data-theme="midnight"] *));
  @layer components {
    .btn { @apply rounded-full bg-violet-600 px-4 py-2 font-semibold text-white; }
    .note { background: white; @variant midnight { background: var(--color-indigo-100); } }
  }
</style>
<div data-theme="midnight" class="flex items-center gap-3 p-4">
  <span class="stripes-amber-300 p-3 font-bold">stripes-amber-300</span>
  <span class="note grid grid-cols-[2rem_1fr] p-2 text-[13px]"><b>[ ]</b>arbitrary grid</span>
  <button class="btn rounded-md midnight:bg-indigo-900">.btn, overridden</button>
</div>

Browser output of Listing 5.17 — Browser output of 17

rounded-md and midnight:bg-indigo-900 beat .btn because the utilities layer follows components. --value() also accepts bare values (--value(integer)), literals (--value("auto")) and brackets (--value([length])); --modifier() reads the part after a slash, and --default() (v4.3) serves the bare class name.

MENU