Validate for clashing token names

[donaldpipowitch]

We just discovered after a long time of usage that our token naming clashes with internal utilities. We have tokens like this:

  --radius-l: 16px;
  --radius-xl: 24px;

The problem is that rounded-xl translates to border-radius: var(--radius-xl), but rounded-l translates to border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem;. I guess this is why Tailwind used lg internally.

We took this naming scheme from our spacing where we also have things like this:

  --spacing-l: 12px;
  --spacing-xl: 16px;

There should be no problems here as we have then classes like pl-l.

First Request

It would be nice if the Tailwind compiler would error on potential naming conflicts.

Second Request

Maybe long term (for v5?) it would be nice if all top/left/right/bottom modifiers would follow the same schema, so that you would write roundedl for border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; and rounded-l works like p-l.

(I admit roundedl looks ugly. Maybe it's rl instead in the future...?)

[rozsazoltan]

It would be nice if the Tailwind compiler would error on potential naming conflicts.

Actually, these values can be overridden, but if the override is intentional, the error message can be frustrating.

Btw.: https://tailwindcss.com/docs/theme#default-theme-variable-reference

[rozsazoltan]

Just idea: Although TailwindCSS IntelliSense could indicate in each line whether it's a new namespace value or an override.