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

[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.

[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

[ony3000]

@agestasaputra Please refer to these documents. And I think you've come to the wrong thread. 😂

[letoast]

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

[devrivers-high]

So far [email protected] plugin provides full flexibility on the config, I was able to achieve 1 line per class name using template string literal and sorted by recommended class order.

The Prettier community says the opposite, but that's why we have plugins to customize our needs.

I tested the config using ViteJS with tailwind css setup.

From this hard to maintain code

export function Button() {
  return (
    <button
      type="button"
      className="rounded bg-indigo-600 px-2 py-1 text-xs font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
    >
      Click Me
    </button>
  );
}

To this easy to maintain and debug code:

 export function Button() {
  return (
    <button
      type="button"
      className={`
        inline-flex
        h-10
        min-w-12
        items-center
        gap-x-1.5
        rounded-md
        bg-black
        px-2.5
        py-1.5
        text-sm
        font-semibold
        text-white
        shadow-sm

        focus-visible:outline
        focus-visible:outline-2
        focus-visible:outline-offset-2
        focus-visible:outline-indigo-600

        hover:bg-indigo-500aaa
      `}
    >
      Click Me
    </button>
  );
}

eslint config:

// eslint.config.js
export default tseslint.config(
  {
    /* your config goes here */
    plugins: {
      /* your plugins goes here */
      // enable plugin
      "readable-tailwind": eslintPluginReadableTailwind,
    },
    rules: {
      /* your rules goes here */
      // enable all recommended rules to warn
      ...eslintPluginReadableTailwind.configs.warning.rules,
      // enable all recommended rules to error
      ...eslintPluginReadableTailwind.configs.error.rules,

      // or configure rules individually
      "readable-tailwind/multiline": ["warn", { classesPerLine: 1 }],
    },
  }
);

It also works with variables (ex:. const className = `...` ), but the tailwind intellisense is not as smart to do the job within a variable, so I keep the class names within the HTML tags for now.

[Redmega]

fyi you can customize the tailwind intellisense setting tailwindCSS.experimental.classRegex to customize that. I use that to get intellisense within clsx() and tailwind-variants calls.

You can probably use something like this for the variables:
https://github.com/paolotiu/tailwind-intellisense-regex-list#javascript-string-variable

[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 ?

[Redmega]

Would love to use a template string for multiline. I think a more nuanced whitespace setting would be good. RIght now it's too strict, if it could strip only spaces but leave newlines alone it would allow for things like

<div className={`
	tw-inline-flex tw-items-center tw-justify-center tw-gap-2 tw-border-2 tw-border-transparent tw-text-center
	tw-font-body tw-font-semibold tw-transition hover:tw-text-current hover:tw-shadow-active disabled:tw-shadow-none
`} />

[BatthewZ]

Just gonna leave these here:
https://www.npmjs.com/package/prettier-plugin-classnames
https://www.npmjs.com/package/eslint-plugin-readable-tailwind

[ony3000]

it wasn't doing anything

@Ayfri Could you elaborate a little more on what this means?

I'm wondering if the line wrapping either didn't work, or if they did work but didn't produce the results you expected.

[Ayfri]

They didn't work at all, it was not changing anything to my code.

[ony3000]

My guess is that it's either a bug in prettier-plugin-classnames (which usually outputs The second format failed.) or something is missing in your Prettier configuration.

Have you checked out this guide?

[Ayfri]

Yes, that's how I've installed it

[ony3000]

Then may be it's a bug in prettier-plugin-classnames.

Please report detail information (configuration, code snippet, public repository, etc.) that would allow me to reproduce the issue to here and I'll check it out.

[wazeerc]

Still nothing? :o

[wazeerc]

This worked for me: https://www.npmjs.com/package/eslint-plugin-readable-tailwind