search

tailwindlabs / tailwindcss-intellisense

Intelligent Tailwind CSS tooling for Visual Studio Code
2.74k stars 181 forks source link

cssConflict warning when using flex and hidden classes #959

Closed oscarmrom closed 2 months ago

oscarmrom commented 2 months ago

What version of VS Code are you using? v1.88.1

What version of Tailwind CSS IntelliSense are you using? v0.10.5

What version of Tailwind CSS are you using? v3.4.1

What package manager are you using? Rails app that uses the tailwindcss-rails

What operating system are you using? macOS

Describe your issue Similar to #136 I get a warning for hidden and flex applying the same properties image

'flex' applies the same CSS properties as 'hidden'.(cssConflict)

<p class="flex italic rounded-sm py-1 text-teal-700 text-xs hidden ml-2 items-center"
adamwathan commented 2 months ago

Hey! This warning is correct, you are setting display: flex and display: none at the same time by setting both of those classes. Something can't be both flex and hidden at the same time, you should conditionally apply the class you need 👍

oscarmrom commented 2 months ago

Thanks for the kind clarification!

nemixbg commented 1 month ago

I have similar issue

Screenshot_45

class="@error('content') border-red-500 dark:border-red-500 @enderror block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"

The same issue when I put in different way:

Screenshot_46

class="border text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 @error('title') border-red-500 dark:border-red-500 @else border-gray-300 dark:border-gray-600 @enderror"