diff --git a/CHANGELOG.md b/CHANGELOG.md index 31913f4169cf..d19e60de1a94 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Don't transition `visibility` when using `transition` ([#18795](https://github.com/tailwindlabs/tailwindcss/pull/18795)) - Discard matched variants with unknown named values ([#18799](https://github.com/tailwindlabs/tailwindcss/pull/18799)) - Discard matched variants with non-string values ([#18799](https://github.com/tailwindlabs/tailwindcss/pull/18799)) +- Show suggestions for known `matchVariant` values ([#18798](https://github.com/tailwindlabs/tailwindcss/pull/18798)) ## [4.1.12] - 2025-08-13 diff --git a/packages/tailwindcss/src/compat/plugin-api.ts b/packages/tailwindcss/src/compat/plugin-api.ts index 321a245eee3f..c52693ef073e 100644 --- a/packages/tailwindcss/src/compat/plugin-api.ts +++ b/packages/tailwindcss/src/compat/plugin-api.ts @@ -247,6 +247,10 @@ export function buildPluginApi({ return aValue < zValue ? -1 : 1 }, ) + + designSystem.variants.suggest(name, () => + Object.keys(options?.values ?? {}).filter((v) => v !== 'DEFAULT'), + ) }, addUtilities(utilities) { diff --git a/packages/tailwindcss/src/intellisense.test.ts b/packages/tailwindcss/src/intellisense.test.ts index f5902a2613df..f9aca65ce0c0 100644 --- a/packages/tailwindcss/src/intellisense.test.ts +++ b/packages/tailwindcss/src/intellisense.test.ts @@ -675,3 +675,40 @@ test('Custom @utility and existing utility with names matching theme keys dont g expect(matches).toHaveLength(1) expect(classMap.get('text-header')?.modifiers).toEqual(['sm']) }) + +test('matchVariant', async () => { + let input = css` + @import 'tailwindcss/utilities'; + @plugin "./plugin.js"; + ` + + let design = await __unstable__loadDesignSystem(input, { + loadStylesheet: async (_, base) => ({ + path: '', + base, + content: '@tailwind utilities;', + }), + loadModule: async () => ({ + path: '', + base: '', + module: plugin(({ matchVariant }) => { + matchVariant('foo', (val) => `&:is(${val})`, { + values: { + DEFAULT: '1', + a: 'a', + b: 'b', + }, + }) + }), + }), + }) + + let variants = design.getVariants() + let v1 = variants.find((v) => v.name === 'foo')! + expect(v1).not.toBeUndefined() + + expect(v1.hasDash).toEqual(true) + expect(v1.isArbitrary).toEqual(true) + expect(v1.name).toEqual('foo') + expect(v1.values).toEqual(['a', 'b']) +})