w-[37px], bg-[#1e293b], [mask-type:luminance], [&>*]:p-2 — escape hatches with full type safety of output.

Classes#

reference
js
<div class="w-[37px] bg-[#1e293b] [mask-type:luminance]">Exact</div>

Example#

example
html
<div class="w-[37px] bg-[#1e293b] [mask-type:luminance]">Exact</div>

Responsive & variants#

Every class here accepts screen prefixes (sm: … xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.

Best practices#

  • Spaces become underscores: bg-[url(/img/hero_bg.jpg)]
  • Arbitrary variants: [&>p]:text-sm targets children

Common mistakes#

  • Overusing arbitrary values — if you need it twice, make a token

concepts/class-anatomy|Class anatomy