Bug: Invalid CSS var(--prefix-*) with literal asterisk when arbitrary values share variable prefix

[thanhquangqb95]

Description

When two or more arbitrary value utility classes reference CSS custom properties that share a common prefix (e.g., --sidebar-width and --sidebar-collapsed-width), Tailwind CSS v4.2.4 generates a single collapsed utility containing var(--sidebar-*) with a literal * character. This is not valid CSS and causes Lightning CSS to throw a parse error, crashing the dev server.

Reproduction

1. Define CSS variables with a shared prefix:

   :root {
     --sidebar-width: 240px;
     --sidebar-collapsed-width: 80px;
   }

2. Use both as Tailwind arbitrary values in a template:

   <div class="md:ml-[var(--sidebar-width)]">Full sidebar</div>
   <div class="md:ml-[var(--sidebar-collapsed-width)]">Collapsed sidebar</div>

3. Run pnpm dev with @tailwindcss/postcss

Result: Lightning CSS parse error, page returns HTTP 500.

Expected Behavior

Two separate CSS rules generated:

.md\:ml-\[var\(--sidebar-width\)\] {
  @media (width >= 48rem) {
    margin-left: var(--sidebar-width);
  }
}
.md\:ml-\[var\(--sidebar-collapsed-width\)\] {
  @media (width >= 48rem) {
    margin-left: var(--sidebar-collapsed-width);
  }
}

Actual Behavior

A third "collapsed" utility is generated with a literal * that is not valid CSS:

.md\:ml-\[var\(--sidebar-\*\)\] {
  @media (width >= 48rem) {
    margin-left: var(--sidebar-*);  /* ← INVALID: Delim('*') */
  }
}

Error:

Parsing CSS source code failed
Unexpected token Delim('*')

This appears before the individual utilities in the compiled output (~line 5520), blocking the entire CSS compilation.

Environment

• Tailwind CSS: v4.2.4
• Framework: Next.js 16.2.4 (Turbopack default)
• PostCSS: @tailwindcss/postcss
• Parser: Lightning CSS
• OS: Windows 11

Workaround

Use @utility directive to define named utilities, bypassing arbitrary value candidate generation:

@utility ml-sidebar-width {
  margin-left: var(--sidebar-width);
}
@utility ml-sidebar-collapsed {
  margin-left: var(--sidebar-collapsed-width);
}

Then use md:ml-sidebar-width and md:ml-sidebar-collapsed in templates.

Notes

• This does NOT happen when only one of the two classes is present — it requires both classes sharing the same utility (ml-) and CSS variable prefix (--sidebar-).
• The same issue occurs with w-[var(--sidebar-width)] / w-[var(--sidebar-collapsed-width)].
• Complex expressions like calc(var(--sidebar-width) + 10px) wrapped in functions do NOT trigger this — only bare var(--prefix-X) references.
• Related: [v4] Namespace override syntax is not valid CSS #15602 (acknowledges * is not valid CSS in namespace context), but that issue covers theme-defined namespaces, not arbitrary value collapse in the normal build pipeline.
• I searched open/closed issues for "namespace grouping", "var(--", "wildcard custom property", "arbitrary value collapse", "Delim('')" — no existing report found.

[wongjn]

Seems to work fine in Tailwind Play. Please provide a minimal reproduction of the issue and we'll take a look.

[RobinMalfait]

This looks like you've got this in your codebase somewhere as-is: md:ml-[var(--sidebar-*)], is that the case?

[thanhquangqb95]

Thanks for checking. I wasn't able to reproduce this in a minimal standalone project either — the bug only manifests in our full Next.js 16 project. Here's what I can share:

Why it likely works in Tailwind Play: Tailwind Play uses the standalone compiler, not @tailwindcss/postcss with Lightning CSS. If var(--sidebar-*) is generated but the standalone compiler's parser silently accepts it, you wouldn't see a crash — but the CSS is still invalid.

Could you check: Does the Tailwind Play CSS output for this example contain var(--sidebar-*) (a literal asterisk inside var())? Even if it doesn't crash, the invalid CSS would still be present in the output.

Full reproduction context:

Our globals.css that triggers the crash:

@import "tailwindcss";
@import "./tokens.css";
@import "./theme.css";
@import "tw-animate-css";
@import "shadcn/tailwind.css";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  /* ... other theme vars ... */
}

:root {
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 80px;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
}

Template usage (across multiple files):

// layout.tsx
<div className="md:ml-[var(--sidebar-width)]">Full</div>
<div className="md:ml-[var(--sidebar-collapsed-width)]">Collapsed</div>

// app-sidebar.tsx
<aside className="md:w-[var(--sidebar-width)]">
<aside className="md:w-[var(--sidebar-collapsed-width)]">

// project-edit-sheet.tsx
<div className="md:left-[calc(var(--sidebar-width)_+_max(...))]">
<div className="md:w-[min(118rem,calc(100vw_-_var(--sidebar-width)))]">

Key factors that may differentiate from minimal repro:

1. Multiple @import chains (tokens.css, theme.css, tw-animate-css, shadcn/tailwind.css)
2. @theme inline defines --color-sidebar-* namespace mapping to --sidebar-* CSS vars
3. 50+ SVG files processed via @svgr/webpack turbopack rule
4. Large source tree (~100+ component files) scanned for utilities
5. Turbopack (default in Next.js 16 dev) + @tailwindcss/postcss + Lightning CSS parser

Exact error output:

Parsing CSS source code failed
  5518 |   .md\:ml-\[var\(--sidebar-\*\)\] {
  5519 |     @media (width >= 48rem) {
> 5520 |       margin-left: var(--sidebar-*);
       |                                  ^
  5521 |     }
  5522 |   }
  5523 |   .md\:ml-\[var\(--sidebar-collapsed-width\)\] {

Unexpected token Delim('*')

Note: line 5520 appears BEFORE the individual --sidebar-collapsed-width utility, suggesting a "namespace grouping" optimization generates the invalid * variant first.

I understand this isn't a clean minimal repro. If the Tailwind Play output does not contain var(--sidebar-*), I'll keep investigating what specific combination triggers it. If it does contain it but doesn't crash, that would confirm the bug is in utility generation (not just parsing).

Environment: Next.js 16.2.4 (Turbopack) + Tailwind CSS 4.2.4 + @tailwindcss/postcss + Lightning CSS + Node 22.x + Windows 11

[wongjn]

If you check in the previously linked Tailwind Play, you'll see in the Generated CSS that there is no var(--sidebar-*) CSS generated.

Perhaps doing a simple text search in your code for md:ml-[var(--sidebar-*)] - you might have it as a comment or in some documentation somewhere.

Otherwise, consider sharing a paired-down version of your repo. You can do simple AB testing alongside when you are trimming bits off. This may help in your debugging.