---
title: "`utility-[--var]` is Tailwind v3 syntax; v4 needs `utility-(--var)` (lint/tw-v3-arbitrary-var)"
description: "lint/tw-v3-arbitrary-var: In v4 square brackets are literal arbitrary values, so `duration-[--duration-fast]` emits `transition-duration: --duration-fast` —…"
canonical: https://void-design.vercel.app/rules/lint/tw-v3-arbitrary-var
lastModified: 2026-09-16
---

# `utility-[--var]` is Tailwind v3 syntax; v4 needs `utility-(--var)`

`lint/tw-v3-arbitrary-var` · severity **error** · category Lint · detected by `void lint` and `void audit`

## Why it matters

In v4 square brackets are literal arbitrary values, so `duration-[--duration-fast]` emits `transition-duration: --duration-fast` — invalid CSS that the browser drops. The transition, color or size silently falls back to the default.

## How to fix it

Replace `[--name]` with `(--name)` (parentheses are v4's CSS-variable shorthand), or write `[var(--name)]`.

## Example

```tsx
// before (v3)
<div className="duration-[--duration-fast] bg-[--brand]" />
// after (v4)
<div className="duration-(--duration-fast) bg-(--brand)" />
```

## References

- https://tailwindcss.com/docs/upgrade-guide#variables-in-arbitrary-values
- https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values

## More lint rules

`void lint` reports 67 rules in this category. Static source checks with no browser: Tailwind v4 silent failures, Next.js 16 API traps, React render-body bugs, accessibility markup, SEO files and motion hygiene.

- `tw-unknown-class` Class looks like a Tailwind utility but compiles to no CSS — [lint/tw-unknown-class](https://void-design.vercel.app/rules/lint/tw-unknown-class)
- `tw-js-config-ignored` `tailwind.config.*` exists but the CSS entry has no `@config` — [lint/tw-js-config-ignored](https://void-design.vercel.app/rules/lint/tw-js-config-ignored)
- `tw-dark-variant-os` `dark:` follows the OS, but the app toggles themes with a class/attribute — [lint/tw-dark-variant-os](https://void-design.vercel.app/rules/lint/tw-dark-variant-os)
- `tw-v3-renamed` Utility whose meaning changed between Tailwind v3 and v4 — [lint/tw-v3-renamed](https://void-design.vercel.app/rules/lint/tw-v3-renamed)
- `tw-important-soup` Many `!important` utilities in one file — [lint/tw-important-soup](https://void-design.vercel.app/rules/lint/tw-important-soup)
- `tw-arbitrary-sprawl` Many arbitrary colors / pixel values bypass the design tokens — [lint/tw-arbitrary-sprawl](https://void-design.vercel.app/rules/lint/tw-arbitrary-sprawl)
- `page-level-use-client` `"use client"` at the top of a page or layout — [lint/page-level-use-client](https://void-design.vercel.app/rules/lint/page-level-use-client)
- `heavy-import` Heavy dependency imported into client code — [lint/heavy-import](https://void-design.vercel.app/rules/lint/heavy-import)

Detected by `void lint` and `void audit`. Explain it in a terminal: `void rules lint/tw-v3-arbitrary-var`