Hyphenated custom container sizes aren't handled properly

[tremby]

What version of Tailwind CSS are you using?

v4.1.3

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

Tailwind Play

What version of Node.js are you using?

Tailwind Play

What browser are you using?

n/a

What operating system are you using?

n/a

Reproduction URL

https://play.tailwindcss.com/OFXbKDyZ5G

Describe your issue

It seems hyphenated custom theme properties are supposed to be supported, like in the example the --color-nice-blue works just fine with a bg-nice-blue.

But if I try the same with a custom container size I get broken behaviour.

If I set --container-custom, I can apply @custom:font-bold and I see it render bold (since we're wider than the specified 2rem). In Tailwind Play's autocomplete, when I type @cus I see @custom: and @max-custom: and @min-custom:. This is all as expected.

But if I set --container-hyphenated-custom, the same doesn't work, and I don't see it render bold. In the autocomplete, interestingly, I see @max-hyphenated-custom: and @min-hyphenated-custom:, but no @hyphenated-custom:.

[wongjn]

Seems like the findRoots() function can't find the @ "root" when there is a dash involved:

tailwindcss/packages/tailwindcss/src/candidate.ts

Lines 739 to 780 in cdecb55

	function* findRoots(input: string, exists: (input: string) => boolean): Iterable<Root> {
	// If there is an exact match, then that's the root.
	if (exists(input)) {
	yield [input, null]
	}
	// Otherwise test every permutation of the input by iteratively removing
	// everything after the last dash.
	let idx = input.lastIndexOf('-')
	if (idx === -1) {
	// Variants starting with `@` are special because they don't need a `-`
	// after the `@` (E.g.: `@-lg` should be written as `@lg`).
	if (input[0] === '@' && exists('@')) {
	yield ['@', input.slice(1)]
	}
	return
	}
	// Determine the root and value by testing permutations of the incoming input.
	//
	// In case of a candidate like `bg-red-500`, this looks like:
	//
	// `bg-red-500` -> No match
	// `bg-red` -> No match
	// `bg` -> Match
	do {
	let maybeRoot = input.slice(0, idx)
	if (exists(maybeRoot)) {
	let root: Root = [maybeRoot, input.slice(idx + 1)]
	// If the leftover value is an empty string, it means that the value is an
	// invalid named value, e.g.: `bg-`. This makes the candidate invalid and we
	// can skip any further parsing.
	if (root[1] === '') break
	yield root
	}
	idx = input.lastIndexOf('-', idx - 1)
	} while (idx > 0)
	}

[philipp-spiess]

Hey! This will be fixed in the next patch release, thanks for the bug report and thanks @wongjn for the fix 🙇