Tailwind Arbitrary Values: Solving Dynamic Styling Without Inline CSS

The Problem: Utility Classes Don't Cover Runtime Data

When styling components, you often need colors or dimensions that aren't predefined in your design system—perhaps a user-selected hex code or a dynamically calculated shadow size. Standard Tailwind utilities like cannot handle these runtime values without resorting to inline styles, which breaks the utility-first workflow and complicates maintenance.

The Solution: Arbitrary Value Syntax

Tailwind's arbitrary value syntax allows you to embed any valid CSS value directly into a utility class name using square brackets. For instance, applies a specific hex color, and sets a size outside the default scale. This keeps styling declarative within the markup.

Worked Example: Dynamic Card Styling

Consider a card needing a custom dark theme color and a specific shadow depth based on configuration:

<div class="bg-[#1e40af] shadow-[200ms_0_4px_6px_rgba(0,0,0,0.1)] rounded-[lg]">...</div>

This single class encapsulates complex, dynamic styling without leaving the Tailwind paradigm.

Verification and Usage

To confirm the class is processed, run Tailwind in watch mode from your project root:

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

After saving the file, inspect . You must find the compiled rule, such as , results in invalid CSS at build time, not a helpful compiler warning. Furthermore, overusing them prevents tree-shaking, potentially increasing your final CSS bundle size.

Use this feature for genuine dynamic tokens or one-off needs, not as a replacement for defining recurring values in `theme.extend`. Verify the output CSS before deployment.