Plus character in utility name doesn't work when defined in TypeScript configuration file

[agusterodin]

What version of Tailwind CSS are you using?

4.1.13

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

Next.js 15.5.3

What version of Node.js are you using?

22.18.0

What browser are you using?

Chrome

What operating system are you using?

macOS 15.6.1 (24G90)

Reproduction URL

https://github.com/agusterodin/tailwind-4-plus-character-bug-reproduction

Run using pnpm i and pnpm dev.

Describe your issue

Any utility class defined in my tailwind.config.ts file that contains a plus (+) character is ignored and not usable. Plus characters in utility names used to work in v3 but no longer work in v4. Plus characters appear to work if I use the new CSS method of defining utilites, however I cannot use pure CSS for my configuration because my theme contains complex stuff that requires TypeScript (not shown in my minimal reproduction).

Example: notice sm+ isn't showing up in Intellisense.

[philipp-spiess]

Hey! Oxide, the scanner we use for v4+, will actually not extract plus inside utility names for v4 at all. So while the CSS config does seem to make the plus get added, the actual utility will not be found when you use the cli or vite/postcss plugins I'm afraid. It does work on our Playground where we use other means to extract class names but it won't work in a real project.

In v3, the naming convention for utilities was a lot less strict about allowed symbols which caused us to scan a lot more "potential tailwind class names" then necessary. In v4 with the Oxide scanner, we tightened this up quite a notch unfortunately.

While potentially we could allow + in utilities, I don't think it's going to be a change that we'll be making lightly and it hasn't come up very often I'm afraid.

Any chance you can use a different name for these?

[agusterodin]

Thanks for letting me know.

I can’t think of any better name for a “slighly nudged up” version of sm than “sm+”. I’ve been using these utility names for font sizes since adopting Tailwind in 2020.

One thing that I like about the “sm+” and similar classnames is that it’s easy to spot during code review. It gives an opportunity to ask what compelled someone to need this in-between value and whether it is truly necessary.

I really hope support for the + character in utility names comes back soon 🙁

[philipp-spiess]

I understand. I'm sorry that I don't have a better answer for you right now but we can always revisit if more people want it. Going to move this into the discussions forum for now so we don't have to close it,.

[agusterodin]

fontSize: {
  'xxs': pxToRem(10),
  'xs': pxToRem(12),
  'sm-': pxToRem(13),
  'sm': pxToRem(14),
  'base-': pxToRem(15),
  'base': pxToRem(16),
  'lg-': pxToRem(17),
  'lg': pxToRem(18),
  'xl-': pxToRem(19),
  'xl': pxToRem(20),
  '1.5xl': pxToRem(22),
  '2xl': pxToRem(24),
  '2.5xl': pxToRem(27),
  '3xl': pxToRem(30),
  '4xl': pxToRem(36),
  '4.5xl': pxToRem(42),
  '5xl': pxToRem(48),
  '6xl': pxToRem(64),
  '7xl': pxToRem(80),
  '8xl': pxToRem(96)
}

I thought using minus signs as shown above would fix things (despite being yuck). It appears to work in Intellisense (unlike the plus sign), but when you actual try to use the utility, it doesn't get generated.

What characters do you allow now? I don't have much to work with here. Please reconsider @adamwathan 🙏