Break long class names into multiple lines? [Prettier Plugin]

[AndrejJurkin]

Hey guys, it's not uncommon for class names to become very long, it's pretty hard to maintain and read. I somehow always break those class names into multiple lines manually, semantically even (by breakpoints). Are there any proper ways of dealing with this problem? In ideal case I could imagine being able to configure line breaks for classes in prettier plugin. Does it make any sense?

[bhison]

on the plus side, breaks you put in will not be changed at least, though I would love some line length enforcement, seems very strange that it's the only thing in my files which will expand over the max width

[rimzzlabs]

if you are using frontend framework like React.

the easiest way is by using clsx, you can separate the class by putting a comma, because you call a function that accept multiple arguments.

example on React:

import clsx from "clsx"

export default function App(){
 return (
  <div className={clsx("w-full h-full", "flex items-center justify-center")}>
   // other components or 
  </div>
 )
}

optional:

Enhance it with tailwind merge to solve style conflict, create a new util files like this one

// @ utils/twclsx.ts

import clsx, { ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export const twclsx(...args: ClassValue[]) => twMerge(clsx(...args))

[sookmax]

It would be really nice if I could write my tailwindcss classes like this in dev time only.

And have them merged into one long complete string of classes at build time, so I don't have to worry about clsx being called every time my component renders at runtime.

[yunsii]

I have made a plugin unplugin-polish-tagged-templates to polish tagged templates, maybe a alternative method. here is a example:

// custom your tagged template function
function cls() {
  //...
}

// usage
const className = cls`
  cursor-pointer
  font-bold text-xl
  text-sky-500
  hover:text-sky-600
`

With the plugin, it will transfrom to:

const className = "cursor-pointer font-bold text-xl text-sky-500 hover:text-sky-600"

[Florian-crg]

You could use @emotion/css or styled-components or even const using the template literals principals

[danieluhl]

Would love addition to prettier for this, it's especially painful in vim/neovim where horizontal scrolling is rough, I manually do it like so:

      <main
        className={`
            flex 
            h-screen 
            w-screen
            flex-col
            items-center
            justify-center 
            bg-gray-800
          `}
      >

[bradley]

This solution works for development if that's what youre after, but it also causes classes to have newlines in them in the web browser, which makes debugging from dev console very ugly.

[cyrus01337]

I think this would be nice if you could group utility classes based on what they're affecting and the modifier type/count, similar to what prettier-plugin-tailwindcss does.

[Andrew-Pynch]

Is there any desire for something like this to get merged into tailwind? This would be a really exciting feature for me and my team to take advantage of

[dionysiusmarquis]

Currently I'm running a self written "minifier" using node-html-parser and magic-string. The minifier removes all newlines and unnecessary whitespace in any inline css class declarations at preprocessor/bundler time. Would be nice to see something similar as an official tailwind option.

Here running as svelte preprocessor e.g.:

import parser from "node-html-parser";
import MagicString from "magic-string";

/** @type {import('node-html-parser').default} */
const parse = parser.parse;

const regEx = /\s{2,}|[\n\r]+/g;

/** @type {(search: string) => RegExp} */
function createRegEx(search) {
  return new RegExp(search.replace(/[.*+\-?^${}()|[\]\\]/g, "\\$&"), "g");
}

/** @type {(node: Node, changes: string[][]) => void} */
function traverse(node, changes) {
  const childNodes = node.childNodes;
  if (childNodes && childNodes.length) {
    for (let i = 0; i < childNodes.length; i++) {
      /** @type {HTMLElement & { rawAttrs?: string }} */
      const childNode = childNodes[i];
      if (
        childNode.rawAttrs &&
        childNode.rawAttrs.match &&
        childNode.rawAttrs.match(regEx)
      ) {
        changes.push([
          childNode.rawAttrs,
          childNode.rawAttrs.replace(regEx, " "),
        ]);
      }
      traverse(childNode, changes);
    }
  }
}

/** @type {(filename: string, content: string, changes: string[][]) => { code: string map: string }} */
function applyChanges(filename, content, changes) {
  const s = new MagicString(content);
  for (let i = 0; i < changes.length; i++) {
    const [source, replace] = changes[i];
    const regex = createRegEx(source);
    const [...result] = content.matchAll(regex);
    for (let j = 0; j < result.length; j++) {
      const match = result[j];
      if (!isNaN(match.index)) {
        s.overwrite(match.index, match.index + source.length, replace);
      }
    }
  }
  var map = s.generateMap({
    source: filename,
    file: `${filename}.map`,
    includeContent: true,
  });

  return {
    code: s.toString(),
    map,
  };
}

/** @type {ReturnType<import('svelte-preprocess').default>} */
export const minifyHtmlAttributes = {
  markup({ content, filename }) {
    let code = content;
    let map = undefined;
    try {
      const html = parse(content);
      const changes = [];
      traverse(html, changes);
      const result = applyChanges(filename, content, changes);
      if (result) {
        code = result.code;
        map = result.map;
      }
    } catch (error) {
      console.error(error);
    }
    return { code, map };
  },
};

[c5n8]

this would result prettier git diff! 🚀

[jpenna]

It makes sense to add line breaks to the plugin for the following reasons:

1. It would follow the directive of Prettier's print-width parameter
2. Re-ordering is against Prettier's principles, so they can respect line breaks without any issue. But the main reason of this plugin is to re-order, so it should handle line breaks in an opinionated way.
3. The current state is flawed. It respect line breaks until it re-order and move classes between lines. For example, after adding ui-active:text-red-600 at the begining of the string:

Prettier sorts it last and moves ui-active:bg-slate-100 up:

The expected result would be to group ui-active together at the bottom line and to not split them, like so:

[dev-xo]

Any news on this?
Would be really useful to have something that could avoid infinite class-names lines.

[code-creativeapps]

would definitely be useful

[CodeNinjaMatrix]

It would be really helpful if there is an option.

[renatoastra]

It would be very useful, any news?

[huggge]

Would be really nice

[bilalmalkoc]

Waiting for this feature.

[vlrevolution]

Waiting for this feature as well

[code-creativeapps]

Tailwind looses a bit of it's utility when the classes you add are hard to read when you come back to them or when someone else reads them.

So formatting the classes with line breaks, and also ordering by media queries like so would be really great :

mt-[10px] flex flex-wrap justify-center gap-x-[30px] gap-y-[20px] 
md:flex md:flex-row 
md:space-x-[20px] md:gap-x-0
lg:space-x-[40px]

[phendan]

This is exactly what I've been wishing for for ages

[harishash]

Thisss >>>>>>>

[theLeroy]

pls!

[tuffstuff9]

This would be an excellent addition! Currently, prettier's wrapping doesn't affect the classNames, at least with my current settings.

[yunsii]

I have made a plugin unplugin-polish-tagged-templates to polish tagged templates, maybe a alternative method. here is a example:

// custom your tagged template function
function cls() {
  //...
}

// usage
const className = cls`
  cursor-pointer
  font-bold text-xl
  text-sky-500
  hover:text-sky-600
`

With the plugin, it will transfrom to:

const className = "cursor-pointer font-bold text-xl text-sky-500 hover:text-sky-600"

It required a prettier/eslint plugin to format internal strings and expressions if the tagged template used in deep indent. If not a proper plugin to format, I will try to create one laterly...

---

After deeper investigation, prettier-plugin-tailwindcss not works well if indent change:

const Component = (
  <p
    className={cls`
      text-sm
    `}}
  >
    Hi
  </p>
)

After add a dom to wrap p tag, it still indent with 4 spaces.

[yunsii]

After more deeper development and investigation, I think I find a best solution for now.

• tagged-classnames-free for write whatever you want classnames
• eslint-plugin-unicorn's template-indent rule to auto indent/dedent
• unplugin-polish-tagged-templates to optimize runtime performance

Try overall features on Gitpod.

[SebiBasti]

I'm also interested in this!

[nOji]

This is one of the main downsides of working with TailwindCSS in modern web development.

[Andrew-Pynch]

has anyone found a good way to integrate these proposed sollutions into neovim?

[Andrew-Pynch]

At this rate I'm gonna have to do the unthinkable and ask my boss if I can contribute to open source to make this myself 😆

[pyropecs]

Instead of doing this long class names. We can just put that in json file and we can parse it as an object and add it to as string. This enables the our own naming conventions into the bunch of class names

[phendan]

Just to add another voice, having the option to format classes over multiple lines would effectively eliminate the one downside (and initial hurdle for many newcomers) that Tailwind has: the line length. As others have mentioned it goes against common formatting conventions to leave the length unrestricted, but it's not just an aesthetic thing. It also makes the styles less legible compared to the ideas cited in this thread, especially the ones where the classes are also grouped, for example by breakpoint. Even though I love Tailwind enough to use it on basically every project, and have been for some time, the fact that this isn't a thing yet still rubs me the wrong way and is always at the back of my mind. This plugin seems like the perfect place to add this functionality.

[Diankes]

This is not integrated in the tailwind plugin to date, currently the best solution is still shift + scroll and a UW monitor or eyeballing it with template strings.

[ony3000]

Hello everyone!

There is a prettier plugin that I released this year. Maybe this will help.

[DerekCL]

@ony3000 thanks for creating this. Really excited for the *.html files to be supported!

[vanngoh]

@ony3000 Does this also support .vue file? 🤩

[ony3000]

@vanngoh Yes, *.vue files are supported! 🙌

(You may have already read this guide. 😂)

[ony3000]

@Velkamhell97 v0.7.0 has been released. The class attribute is now also supported by default!

[agestasaputra]

Hey everyone, can you guys share the docs how to implement eslint-plugin-readable-tailwind into eslint flat config?
Thank you

[letoast]

https://www.npmjs.com/package/eslint-plugin-readable-tailwind

[griga]

sadly non of this options have worked for me.

my vscode solution is to quickly toggle word wrapping in file with alt+z

• also set Wrapping Indent setting to indent

[cupid20103]

There are some way to solve this problem.
You can solve this problem by using tailwind-css and styled-components together.
You can refer it on this: Tailwind-Styled-Component

I hope this helps you.

[Ayfri]

Any update ?