Prevent wrapping inline CSS lines in VS Code

Question

I've been working with tailwind for a while, and I'm starting to get annoyed by VS Code wrapping class names to one per line. This is what I mean

                        <div
                          class="
                            absolute
                            inset-y-0
                            right-0
                            pr-3
                            flex
                            items-center
                            pointer-events-none
                          "
                        >

It is indeed more readable, but even short snippets become incredibly long to scroll. I tried every single setting in VScode, (Settings > Html > Format) to no avail. That one specific div does not wrap if I cut the content where "items" ends in items-center. I'd really like to increase the limit if possible.

Answer 1

You need to put them back togather and then use VS code extinsion called: beautify for your codes.

Answer 2

try some extensions like Beautify and Prettier.

I personally use Prettier.