CSS conflict: applies the same CSS properties as

[Mihai-github]

Hi,

I've started recently using tailwind and I am having an issue with the fact that I cannot use in code-editor the same property but with different values in different window sizes. What I am trying to say can be seen in the following example:

<div className="text-left  lg: text-center">
          <p style={{ color: "red" }}>salut</p>
</div>

In vs-code (my code editor) having the tailwind extension, and also tested on the official tailwind playground I am getting the following warning ** text-center' applies the same CSS property as 'text-left'.(cssConflict).**
If there is a white space between the media query selector (in our case lg:) the style text-left wont be applied for different window sizes, only the text-center will be used everywhere (makes sense if there is a problem to take the latest class).
But if there is no white space between lg and text-center like below:

<div className="text-left   lg:text-center">
          <p style={{ color: "red" }}>salut</p>
 </div>

It Will work just fine, BUT... if you would have a more complicated style from my testing the only way I've found is having everywhere you would like to use something different based on the window size that has been previously declared you must use the same "hack" like below:

<div className="text-left bg-gray-700  lg:text-center lg:bg-gray-500">
          <p style={{ color: "#fff" }}>salut</p>
</div>

I'm opened to any suggestion and I would also like, if possible, some clarification as to why this is not working in the dev stage (coding environment), but in the playground works having the same warning.

[simonswiss]

Hey @Mihai-github 👋

I hope you're enjoying Tailwind CSS so far!

When applying responsive variants, there must be no space between the variant and the utility class.

lg:text-center is correct, lg: text-center (with the space) is not.

---

from my testing the only way I've found is having everywhere you would like to use something different based on the window size that has been previously declared you must use the same "hack" like below:

<div className="text-left bg-gray-700  lg:text-center lg:bg-gray-500">
          <p style={{ color: "#fff" }}>salut</p>
</div>

This is not a hack, this is how Tailwind responsive classes work! You define styles for small screens, and can alter those styles at specific breakpoints where needed, like you do here for the lg breakpoint 👍

---

text-center' applies the same CSS property as 'text-left'.(cssConflict).

When you have a space between the lg: variant and the utility class, those are considered two separate classes (a space is a delimited between two classnames!). Therefore, that error message makes sense: it warns you that you're trying to apply both text-left and text-center to the same element.

---

I would also like, if possible, some clarification as to why this is not working in the dev stage (coding environment), but in the playground works having the same warning.

I am not sure what your code environment looks like, so it's kinda hard to understand this question, but perhaps my explanation above solves the problem for you?

[Mihai-github]

@novuspace Thank you, I have read it, but for some kind of reason, I thought something different.
Now all is clear.

Hope this discussion will help others 👍

[simonswiss]

Discussions like these are great, because they always seem to end up helping someone else down the road, 6 months later 👍

[Mihai-github]

@simonswiss Indeed :D that's why I am so happy to see if someone when having an error and post on a community platform for developers and gets answers is a really nice feeling to have in my option. Also down on the road, someone else could benefit from a well-done discussion with answers.

[feapolina]

Thank you so much, still helping people in 2024. Obrigado!

[realihorrud]

And still...

[curiouscod3]

I had to change my tailwindCSS intellisense classRegex option for a special case.
It causes the 'cssConflict' warning which is annoying !

 // https://github.com/tailwindlabs/tailwindcss-intellisense/issues/129
  "tailwindCSS.experimental.classRegex": [
    "`([^`]*)", // This can cause wrong 'cssConflict' issue
    "tw`([^`]*)",
    "classnames\\(([^)]*)\\)",
    "'([^']*)'", // This can cause wrong 'cssConflict' issue
    // "\"([^']*)\"", // This can cause wrong 'cssConflict' issue
  ],

For me, To fix this issue, the following option worked !
TailwindCSS Lint Option

"tailwindCSS.lint.cssConflict" : "ignore"

This is my full TailwindCSS settings in the settings.json !

// For Auto Completion, Check "editor.quickSuggestions"
  "tailwindCSS.includeLanguages": {
    "plaintext": "html",
    "javascript": "javascriptreact",
    "typescript": "typescriptreact", // or javascriptreact
    "html": "HTML"
  },
  // https://github.com/tailwindlabs/tailwindcss-intellisense/issues/129
  "tailwindCSS.experimental.classRegex": [
    "`([^`]*)", // This can cause wrong 'cssConflict' issue
    "tw`([^`]*)",
    "classnames\\(([^)]*)\\)",
    "'([^']*)'", // This can cause wrong 'cssConflict' issue
    // "\"([^']*)\"", // This can cause wrong 'cssConflict' issue
  ],
  "tailwindCSS.emmetCompletions": false,
  "tailwindCSS.classAttributes": ["class, className, ngClass"],
  "tailwindcss.colorDecorators": "inherit", // inherit from "editor.colorDecorators"
  "tailwindcss.references": true,
  // "tailwindcss.diagnostics": {
  //   "enabled": true,
  //   "conflict": "strict",
  //   "emptyClass": true,
  //   "emptyGroup": true,
  //   "emptyCssProperty": true
  // },
  "tailwindcss.preferVariantWithParentheses": false,
  "tailwindcss.fallbackDefaultConfig": true,
  "tailwindcss.enabled": true,
  "tailwindcss.jsxPropImportChecking": true,
  "tailwindcss.rootFontSize": 16,
  "tailwindcss.logLevel": "info",
  "tailwindcss.documentColors": false,
  "tailwindcss.hoverColorHint": "none",
  // [tailwindCSS.lint Options] 
  // https://github.com/tailwindlabs/tailwindcss-intellisense#tailwindcssvalidate
  "tailwindCSS.lint.cssConflict" : "ignore",

[StyxUA]

Weird thing here: border-white/75 and active:border-stone-500 apparently apply the same CSS.

Any ideas, why is that so?

[RobinMalfait]

Can you double check if the vscode extension is up to date?

[StyxUA]

@RobinMalfait Sorry, should have clarified it's a PhpStorm. tailwindcss 4.3.3, @tailwind/language-server 0.14.29.

[StyxUA]

Same thing with focus:, but hover: is good. text-... also affected.

[RobinMalfait]

Aha I see, yeah the underlying language server needs updating. So if you can bump @tailwindcss/language-server to 0.16.0 at the time of writing this, then that should solve this.

[StyxUA]

Yes, that solved the issue. Thanks a lot!