Skip to content

Utilities don't suggest arbitrary values like variants do (e.g. when using matchUtilities) #1444

@benface

Description

@benface

What version of Tailwind CSS are you using?

v4.1.12, and actually even the most recent insiders version (0.0.0-insiders.8165e04) since I know you fixed some related issues in tailwindlabs/tailwindcss#18798 and tailwindlabs/tailwindcss#18799.

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

None, just tailwindcss and @tailwindcss/cli version 0.0.0-insiders.8165e04

What version of Node.js are you using?

v24.5.0

What browser are you using?

N/A

What operating system are you using?

macOS

Reproduction URL steps / Describe your issue

Issue 1

In a legacy @plugin:

matchVariant(
  "foo",
  (value) => {
    return `&:is([data-foo='${value}'])`;
  },
  {
    values: {
      DEFAULT: "",
      bar: "bar",
    },
  }
);

In the HTML:

<div class="foo-
               ^
               IntelliSense suggestions:
               - foo-[]:
               - foo-bar:

foo: should also be suggested because of the DEFAULT: "" value, but it's not.

Issue 2

In a legacy @plugin:

matchUtilities({
  bar: (value) => ({
    "--bar": value,
  }),
});

In the HTML:

<div class="bar-
               ^
               IntelliSense suggestions:
               - backdrop-blur-2xl
               - etc.

bar-[] should probably be suggested, for the same reason foo-[]: is suggested above (though I understand the latter is a variant and it may intentionally work differently for utilities).

Thank you 🙏 🫶

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions