What version of Tailwind CSS are you using?

v4.3.0

What build tool (or framework if it abstracts the build tool) are you using?

N/A

What version of Node.js are you using?

v24

What browser are you using?

N/A

What operating system are you using?

N/A

Reproduction URL

Repository, see at-apply-with-breakpoint.mjs

Run with npm install && npm run at-apply-with-breakpoint

Describe your issue

Discovered by using eslint-plugin-better-tailwindcss.

Using breakpoints in utility classes (via apply) breaks the canonical classes discovery. Example:

@import "tailwindcss";

@utility foo {
  @apply text-[13px] font-medium md:text-[15px];
}

The md:text-[15px] part is the breaking one. If it gets removed, everything works just fine.

design.canonicalizeCandidates(['text-[13px]', 'font-medium', 'md:text-[15px]'], { collapse: true, logicalToPhysical: true, rem: 16 })
//   without md:text-[15px] in @apply body: ['foo']  (correct)
//   with md:text-[15px] in @apply body:    ['text-[13px]', 'font-medium', 'md:text-[15px]']  (unchanged)

Or a more complex (real life) example:

// @utility copy-small         { @apply text-[13px] md:text-[15px]; }
// @utility copy-small-medium  { @apply text-[13px] font-medium md:text-[15px]; }
design.canonicalizeCandidates(['copy-small', 'font-medium'], opts)
//   expected: ['copy-small-medium']
//   actual:   ['copy-small', 'font-medium']