Arbitrary values with responsive modifiers not working properly in Tailwind CSS v4

[seonwoo94]

Description

When using arbitrary values with responsive modifiers in Tailwind CSS v4, the responsive styles are not being applied correctly. This behavior differs from previous versions where it worked as expected.

Current Behavior

• When using arbitrary values with responsive modifiers, only the base style is applied
• The responsive modifier with arbitrary value is ignored

Expected Behavior

All responsive modifiers should be applied according to the breakpoint, regardless of whether they use arbitrary values or utility classes.

---

Working Cases:

// Utility + Utility
<p className="font-light md:font-bold">
// Both light and bold are applied at respective breakpoints

// Utility + Arbitrary
<p className="font-light md:font-[600]">
// Both light and 600 are applied at respective breakpoints

---

Not Working Cases:

// Arbitrary + Utility
<p className="font-[300] md:font-bold">
// Only font-[300] is applied, md:font-bold is ignored

// Arbitrary + Arbitrary
<p className="font-[300] md:font-[600]">
// Only font-[300] is applied, md:font-[600] is ignored

// Similar issues with other properties
<p className="text-[12px] sm:text-[15px]">

---

Environment

• Tailwind CSS version: 4.0.9
• Build tool: Vite
• React version: 18.3.1
• Browser: Chrome 133.0.6943.142, Safari 18.1.1
• OS: macOS 15.1.1

[wongjn]

Seems to be working in this Tailwind Play which would suggest something particular to project that is causing the unexpected behavior. Consider providing a git repo that reproduces your issue.

[seonwoo94]

I found the root cause of the issue.
The problem occurred when importing CSS files that still contained the old @tailwind utilities directive from previous versions.
When these legacy CSS files were removed or updated to use the new @import "tailwindcss" syntax, the responsive arbitrary values worked correctly in Tailwind CSS v4.

This confirms that there is no bug in Tailwind CSS v4, and the issue was caused by mixing old and new syntax in the project.

Thank you for your help!