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.