Tailwind Arbitrary Values

What Are Arbitrary Values?

Arbitrary value syntax wraps a raw CSS value in square brackets directly inside a utility class, like top-[117px] or bg-[#1da1f2], generating a one-off style without any configuration changes.

This gives Tailwind the flexibility of raw CSS for edge cases while keeping the vast majority of your styling within the consistent, maintainable utility system.

<div class="absolute top-[117px] left-[calc(50%-24px)] w-[350px] bg-[#1da1f2]">
  Precisely positioned, one-off element.
</div>

Every value here is a raw CSS value that doesn't exist anywhere in Tailwind's default scale.

Arbitrary Value Syntax

class="property-[value]"
class="property-[value1_value2]"   /* spaces become underscores */
class="bg-[url('/hero.jpg')]"

• Wrap the raw value in square brackets directly after the utility prefix.
• Replace spaces with underscores inside the brackets, since class names can't contain spaces.
• Works for colors, sizes, positions, backgrounds, and even CSS functions like calc().
• Arbitrary properties (a newer feature) let you write an entirely custom CSS property, like [mask-type:luminance].

Arbitrary Values Cheatsheet

Common arbitrary value patterns and their use cases.

When Arbitrary Values Make Sense

Arbitrary values shine for genuinely one-off cases: matching a third-party widget's exact pixel dimensions, positioning an element to match a specific design mockup precisely, or using a calc() expression unique to one layout.

• Matching an exact pixel value required by a third-party embed or design spec.
• One-off calc() expressions specific to a single layout.
• Quick prototyping before deciding if a value deserves a permanent theme extension.
• CSS features Tailwind doesn't have a dedicated utility for yet.

Arbitrary Values vs Extending the Theme

If the same arbitrary value starts appearing on more than a couple of elements, that's a signal to extend theme.spacing, theme.colors, or the relevant theme key instead, turning a one-off hack into a proper, reusable design token.

Arbitrary Properties

Beyond arbitrary values for existing utilities, Tailwind also supports fully arbitrary CSS properties using square brackets around the whole declaration, for CSS features with no dedicated utility at all.

<div class="[mask-type:luminance] [-webkit-tap-highlight-color:transparent]">
  Uses raw CSS properties with no matching Tailwind utility.
</div>

Common Mistakes

• Overusing arbitrary values throughout a project instead of extending the theme for recurring needs.
• Forgetting to replace spaces with underscores inside square brackets, breaking the class name.
• Using an arbitrary pixel value that's extremely close to an existing scale value, when the scale value would work fine.
• Not realizing arbitrary properties exist for CSS features without a dedicated Tailwind utility.
• Writing overly complex calc() expressions inline instead of extracting them into a named, documented theme value.

Key Takeaways

• Arbitrary values use square bracket syntax to apply any raw CSS value to a utility class.
• Spaces inside arbitrary values must be replaced with underscores.
• Arbitrary values are best reserved for genuinely one-off, non-repeating cases.
• Recurring arbitrary values should be promoted to proper theme extensions instead.
• Arbitrary properties extend this flexibility to entire CSS declarations with no existing utility.