tailwindcss-intellisense
tailwindcss-intellisense copied to clipboard
BUG: Conflict Diagnostics does not capture Arbitrary values
What version of VS Code are you using?
v1.89.0
What version of Tailwind CSS IntelliSense are you using?
v0.10.5
What version of Tailwind CSS are you using?
v3.3.2
What package manager are you using?
yarn
What operating system are you using?
macOS
Tailwind config
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}'],
theme: {
extend: {
fontFamily: {
barlowCondensed: ['BarlowCondensed-Regular', 'sans-serif'],
barlowCondensedBold: ['BarlowCondensed-Bold', 'sans-serif'],
barlowCondensedSemiBold: ['BarlowCondensed-SemiBold', 'sans-serif'],
},
},
},
plugins: [],
};
VS Code settings
Not necessary
Reproduction URL
Not necessary
Describe your issue
The plugin works great at detecting conflicting classes within a class tag
But there is an issue, it doesn't detect the conflict when arbitrary values are used
Hi! This one is working as intended for today at least given that the properties generated are different. text-xs
generates both font-size
and line-height
whereas text-[16px]
only generates font-size
. If you were to write text-[16px]/6 text-xs
then you'd get a warning.
However, I can see that this is potentially surprising behavior. Will talk through this with the team. 👍
With your explanation, it doesn't sound like a bug anymore.
So we've talked this through and we'd have to either special case this on a per-utility basis or change the matching behavior to "any" overlapping properties. However that would be a problem given that utilities like m-5 mx-3 ml-4
would then show conflicts when that would not be desirable.
So, we think it's best to leave this as is for now. Closing.