Part 53: Arbitrary Values with Square Brackets [value]

Need a 1-off dimension that doesn't fit standard scales? Use square bracket syntax [value] as a clean escape hatch.

1. Syntax Examples

• Custom pixel size: w-[327px]
• Custom hex color: bg-[#0f172a]
• CSS calculation: h-[calc(100vh-64px)]
• CSS Grid template: grid-cols-[200px_1fr]
• Complex box shadow: shadow-[0_35px_60px_-15px_rgba(0,0,0,0.3)]

<div class="w-[340px] h-[calc(100vh-80px)] bg-[#1a1b26] text-white p-[18px]">
  Pixel-perfect arbitrary values generated on the fly by JIT!
</div>

Key Takeaways

• Use [value] when a design requires a unique one-off value without polluting configuration.

In Part 54, we will analyze The @apply Directive: Pros, Cons & When to Use It!