Using Tailwind CSS Arbitrary Values for One‑Off Styling

The problem: needing a one‑off size or color without touching tailwind.config.js

When you build a UI component you often hit a value that isn’t in your design system—a specific width, a brand‑exact hue, or a custom spacing. Adding a new utility to tailwind.config.js for a single use feels heavy, and writing raw CSS in a style attribute breaks the utility‑first workflow.

How arbitrary values work

Tailwind CSS v3.0 (and v2.1 with the JIT mode enabled) introduces arbitrary values. By wrapping any CSS value in square brackets you can inject it directly into a utility class, for example w-[123px] or bg-[#ff0]. The brackets tell Tailwind to treat the contents as a literal CSS token, which is then emitted into the generated stylesheet at build time. No config change is required, and the value participates in Tailwind’s normal prefixing, important‑flag handling, and variant support (e.g., hover:bg-[#ff0]).

Worked example: a responsive card

Imagine a card that needs a width of 260 px on small screens, expands to 340 px on medium screens, and uses a hover background that matches a brand colour not present in the palette.

<div class="bg-white rounded-lg shadow p-[1.5rem] w-[260px] md:w-[340px] transition-colors duration-200 hover:bg-[#ff6600]"
>
  <h3 class="text-lg font-semibold mb-2">Product title</h3>
  <p class="text-gray-600">Description that fits the custom width.</p>
</div>

The classes w-[260px] and md:w-[340px] set the width at the base and medium breakpoints. p-[1.5rem] adds padding that isn’t in the default spacing scale. The hover background uses hover:bg-[#ff6600], a brand orange. When you run the build (e.g., npm run build or tailwindcss -i input.css -o output.css --watch) you’ll see the corresponding CSS rules in the output, such as:

.\[w-\[260px\]\] { width: 260px; }
.\[md\:w-\[340px\]\] @media (min-width: 768px) { width: 340px; }
.\[p-\[1\.5rem\]\] { padding: 1.5rem; }
.\[hover\:bg-\[#ff6600\]\]:hover { background-color: #ff6600; }

Trade‑off and when to avoid

Arbitrary values let you escape the design system, which can lead to scattered magic numbers and larger HTML if overused. Because the values are not defined in the config, they aren’t subject to Tailwind’s linting or theme‑aware intellisense, making design audits harder. Additionally, if the bracket content is a dynamic string (e.g., pulled from JavaScript at runtime) Tailwind’s JIT cannot statically analyze it, so the value may be omitted from the purged CSS, increasing the final file size.

Use arbitrary values for:

• One‑off adjustments that truly belong in markup (e.g., a specific image width).
• Values that are unlikely to repeat elsewhere.
• Quick prototyping where adding a config entry would slow you down.

If you find yourself reusing the same arbitrary value in multiple places, extract it into the theme (e.g., add a width or color to tailwind.config.js) to keep the design system consistent.

Actionable steps

1. Start a fresh Tailwind project (or open an existing one) with tailwindcss@^3.0 or tailwindcss@^2.1 plus the JIT flag.
2. Add a component with an arbitrary value, such as class="p-[2.5rem]".
3. Run the build command and inspect the generated CSS file for the emitted rule.
4. Change the bracket value (e.g., to p-[3rem]) and reload the page; the UI should update without a config change.
5. Review your HTML: if the same arbitrary value appears more than twice, consider moving it into tailwind.config.js.