Description
Tailwind CSS v4 Selector Parsing Issue with Empty String Attribute
Environment
- Tailwind CSS Version: 4.0.7
- Framework: Next.js 15.1.7
- Node.js Version: 22.14.0
- Browser: Chrome
- Operating System: Windows
Reproduction
Repository: https://github.com/coderrshyam/next.js-hook-webpack-error
Steps to Reproduce:
- Clone the repository:
git clone https://github.com/coderrshyam/next.js-hook-webpack-error.git
cd next.js-hook-webpack-error- Install dependencies:
pnpm install- Attempt to build the project:
pnpm buildIssue Description:
When attempting to build a Next.js project with Tailwind CSS v4, an issue occurs with CSS selector parsing, specifically for selectors containing attribute selectors with empty string values.
The problematic selector: .prose code[data-theme*=" "]
Behavior in Tailwind CSS v3 (Working Correctly)
In Tailwind CSS v3, the selector is parsed correctly:
Parser {
rule: '.prose code[data-theme*=" "]',
options: { lossy: false, safe: false },
position: 8,
css: '.prose code[data-theme*=" "]',
// ... other properties
}Behavior in Tailwind CSS v4 (Incorrect)
In Tailwind CSS v4, the selector is not parsed correctly:
Parser {
rule: '.prose code[data-theme*=\\]',
options: { lossy: false, safe: false },
position: 8,
css: '.prose code[data-theme*=\\]',
// ... other properties
}Expected Behavior
The parser in Tailwind CSS v4 should correctly handle the empty string in the attribute selector, similar to how it was handled in v3.
Actual Behavior
The parser in Tailwind CSS v4 seems to be escaping or misinterpreting the empty string in the attribute selector, leading to an incorrect parsing of the CSS rule.
Additional Notes
- This issue specifically occurs during the build process of a Next.js project.
- The problem appears to be isolated to cases where an attribute selector contains an empty string value.