Using Tailwind CSS Arbitrary Values for One‑Off Styles Without Bloating Your Config

Problem: One‑off styles create configuration noise

When a design calls for a width that isn’t in your spacing scale, a brand‑specific color, or a hover opacity that differs from the default, the usual Tailwind workflow pushes you to add a new utility class in tailwind.config.js. Over time this leads to a growing list of custom utilities that are hard to audit and can drift from the design system.

Thesis: Arbitrary values keep styling close to the component

Tailwind’s arbitrary value feature lets you write any CSS value inside square brackets directly in your HTML or JSX. The class is processed by the JIT compiler at build time, producing the exact rule you need without touching the configuration file. This keeps the style co‑located with the markup and avoids unnecessary entries in tailwind.config.js.

How arbitrary values work

The syntax mirrors regular Tailwind utilities: utility-[value]. The part inside the brackets is passed straight through to the generated CSS. For example:

• w-[123px] → width: 123px;
• bg-[#ff6600] → background-color: #ff6600;
• hover:opacity-[0.7] → hover { opacity: 0.7; }

Because the JIT scans your source files for class names, any arbitrary value that appears in the markup will be included in the final CSS, provided the file is listed in the content array of your Tailwind config.

Worked example: A custom card component

Imagine a card that needs a width of 238 px, a brand orange background (#ff6600), and a subtle hover effect that reduces opacity to 0.6. Using arbitrary values, the component can stay self‑contained:

<div class="w-[238px] bg-[#ff6600] text-white p-4 rounded-lg hover:opacity-[0.6] transition-opacity"
>
  <h3 class="text-lg font-semibold">Featured Item</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

After running the build command, the generated CSS will contain:

.w\[238px\]{width:238px;}
.bg\[#ff6600\]{background-color:#ff6600;}
.hover\[opacity\[0\.6\]\]:hover{opacity:0.6;}

Notice that the brackets are escaped in the output, which is normal and does not affect the styling.

Trade‑off: Bypassing the design system

Arbitrary values give you freedom, but they also let you step outside the constraints defined in tailwind.config.js (spacing scale, color palette, etc.). If used excessively, you may end up with:

• Inconsistent spacing or colors that are harder to update globally.
• Difficulty enforcing design‑system guidelines during code reviews.

To mitigate this, treat arbitrary values as a tool for truly exceptional cases—values that are not reusable and are unlikely to change across the project. For recurring patterns, still prefer adding a utility to the config or extending the theme.

Verification steps

1. Run the Tailwind CLI with your actual source paths:

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

   Ensure the files where you used arbitrary values are included in the content array of tailwind.config.js.
2. Inspect output.css for the expected rules (e.g., search for w\[238px\]). If the rule is missing, double‑check that the markup file is being scanned.
3. Open the built page in a browser and verify the visual result matches the intended width, background color, and hover opacity.
4. Optionally add a visual regression test (Storybook, Percy, etc.) to catch unintended changes when you later modify the design system.

Actionable closing

When you encounter a one‑off style that doesn’t fit your existing Tailwind utilities, reach for the bracket syntax first. It keeps your HTML tidy, avoids cluttering the config, and leverages the JIT’s automatic purging—provided the file is monitored. Reserve arbitrary values for exceptional, non‑reusable values, and continue to rely on your theme for the bulk of your styling. This balance gives you the speed of utility‑first CSS without sacrificing the consistency of a centralized design system.