Doesn't work with one class per line

[nym21]

Hi,

The library is great, though it doesn't work when I have one css class per line (which is in my opinion much cleaner).

Like so:

<div class="
    mx-auto
    max-w-5xl
    flex
    flex-col
    items-center
    px-4
    py-24
    space-y-16
">
    ...
</div>

Is that something that can be done or is there some kind of limitation from VS Code ?

Thank you !

[philippbosch]

Seems to work for me:

See the underlines for conflicting flex and block.

[nym21]

It works now indeed ! 👍

[nym21]

Correction, it works indeed in .html files, still not in .svelte, .vue or even .jsx files not sure what's the problem

Did I forget to configure something ?

I tried to add these settings but it doesn't change anything

"tailwindCSS.includeLanguages": {
        "svelte": "html",
        "vue": "html",
        "javascriptreact": "html",
        "typescriptreact": "html",
    }

[philippbosch]

Does it work in Svelte files if it's on one line? If not, did you try this – somebody commented it should be Svelte (with an uppercase S) instead of svelte.

[nym21]

It starts working on one line if there is already a css class written, exactly like on the last comment of the issue you linked

Just to clarify:

class="DOESNTWORK

class="text-gray-500 WORKS

class="
text-gray-500
DOESNTWORK

class="
text-gray-500 WORKS

and yet all theses cases work in an HTML file

[bradlc]

Hey @gawlk. Unfortunately this is out of the extensions control as far as I'm aware. We have certain "trigger" characters which force the completions to display (e.g. quotes, space, etc.), but when not typing these characters, for example hitting enter and then typing a class, VS Code will trigger completions based on whether it considers the cursor to be in a appropriate context.

You can however trigger completions manually by pressing Ctrl+Space. Hope that helps!

[nym21]

Hi @bradlc !

Thank you for taking the time to answer me on this issue. Is it possible to treat files with such extensions the way as you treat html files ? Since like I said, it works very well in html files.

I thought the configuration that I added would do the trick but they don't seem to do anything. Is it possible that there is a conflict with other extensions ?