Question 257035 in Html Question posted in
Some basic documentation can be found here.

Html – Is there a way to improve readability of tailwind classnames in code?

When using TailwindCSS, the className field easily stretches on the right, making it hard to read and edit.

Here is an example:

className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"

A part of this most likely won’t be visible if you have two windows on your editor.

Is there a VSCode or a CLI tool to indent this and improve readability?

Thanks!

Tags:

2

Answers


  1. 0

    Yes, In VS code just press Alt + Z basically its word wrap

    or

    In VC code, go to view there you enable word wrap

    Login or Signup to reply.
  2. 0
    1. First thing is to keep classes in order from more external to internal.
      Like Margin > Width / Height > Border > Padding etc…
    2. Next step is to keep actions like :hover :visited after all from default state of element
    3. Third step is to keep custom classes that are out of framework / core after all previous
    4. And at end of class snake people keep classes which only purpose is to be js anchor (its not like i recommed it but see it quite often)

    Many people don’t like next step but from time to time you can see people keep long class / style list in vertical layout

    In my opinion its way better for long elements to read classes but also cost a few bytes, and it make you see less of code at same time.

    <html>
<body>
   <div className="
     group
     rounded-lg
     border
     border-transparent
     px-5
     py-4
     transition-colors
     hover:border-gray-300
     hover:bg-gray-100
     hover:dark:border-neutral-700
     hover:dark:bg-neutral-800/30
     "
   >
      Content
   </div>
</body>
</html>

    Worst way would be mix it like:

    <html>
<body>
   <div className="
     group
     rounded-lg border border-transparent
     px-5 py-4
     transition-colors
     hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30
     "
   >
      Content
   </div>
</body>
</html>

    Imo. its worst cause some lines can get wraped if they are too long and it would mess hierarchy.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search