[BUG] Classname '-ml-[1px]' is not a Tailwind CSS class!

[muqshots]

Describe the bug
Classname '-ml-[1px]' is not a Tailwind CSS class!

Expected behavior
It's a valid tailwind class

Using the latest v3.3.6

[francoismassart]

Hi @muqshots ,

I can easily reproduce the issue but I'm not sure at 100% on which declaration is recommended:

• -mr-[1px]
• mr-[-1px]

Both declarations works, see an example here: https://play.tailwindcss.com/4GBTdPr11e?layout=horizontal

I'll ask on discord and twitter if there is a recommendation for this.

[francoismassart]

Discord message with the question: https://discord.com/channels/486935104384532500/486935482656227339/937349683767021658

[francoismassart]

I would tend to prefer avoiding the "-" prefix for negative arbitrary values because you could get double negative cases such as -top-[var(--top)] when your css var --top contains a negative value e.g. -1px

then -top-[var(--top)] would "equals" to => -top-[-1px] => top: 1px

[francoismassart]

[muqshots]

Thanks!, I'll be changing the classes I use. However I do think it would be nice to change the error message if possible since it is a valid class, just not recommended.

[francoismassart]

Here is what I think I’ll do:

1. Allow both ways to use negative arbitrary values
2. Add a new rule « enforces-negative-arbitrary-values » which warns you about using the dash prefixed classnames like « -top-[-1px] »

[francoismassart]

FIXED in the latest:

npm i -D eslint-plugin-tailwindcss@3.3.7