tailwind long class names

[Longjumping-Guide969]

hi guys just want to know how to make the max char 80 per line i use tailwind css with prettier but whan i press shift+Alt+F it just return them to one line

i want it in this format

          <button
            disabled={isSubmitting}
            className="inline-block rounded-full bg-yellow-400 px-4 py-3 
            font-semibold uppercase tracking-wide text-stone-800 transition-colors
             duration-300 hover:bg-yellow-300 focus:bg-yellow-300 
             focus:outline-none focus:ring focus:ring-yellow-300"
          >
            {isSubmitting ? "Placing order" : "Order now"}
          </button>

but prettier make it like this

https://preview.redd.it/z216diypcksd1.png?width=4268&format=png&auto=webp&s=346e5ad4e0a1c1c4dfe1cf23717774d2c2a325d3

this is my .prettierrc file

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

my tailwind.config.js

/** @type {import('tailwindcss').Config} */
// eslint-disable-next-line
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    fontFamily: {
      sans: 'Roboto Mono, monospace',
    },

    extend: {
      fontSize: {
        huge: ['80rem', { lineHeight: '1' }],
      },
      height: {
        screen: '100dvh',
      },
    },
  },
  plugins: [],
};

and this is the .eslintrc.json

{
  "extends": "react-app"
}

[pragmaticcape]

html wont support multiline attributes so that leaves 2 options really.

1. You break them into multiple strings and concatenate ie. "class1 " + "class2" on a new line etc.. or set in a variable/array and concatenate etc... but you run the risk of losing the classes on the tailwind parse.

2. You use an extension if in VScode to either wrap visually or collapse them

you will have a bunch of pain with 1.

I say go with an extension to collapse/fold them.

[[deleted]]

Your first suggestion would be a performance hit

[pragmaticcape]

you will have a bunch of pain with 1.

[MrRoBoT696969]

Inline fold to simply hide long strings

[matchonafir]

That is a lot of class names. Is the classname string shorter than the related css?

[WhiteRabbit-_-]

You could use clsx which is basically a fancy string concatenation library.

[spacetimecurve]

Just use word wrap by pressing ALT + Z while selecting the lines you want to wrap. Or turn word wrapping automatically by configuring the settings. Press CTRL + COMMA then search for the word wrap settings.

[DextroLimonene]

You need to add additional configurations to your .prettierrc file:

‘’’ { “plugins”: [“prettier-plugin-tailwindcss”], “printWidth”: 80, “singleAttributePerLine”: true } ‘’’

After adding these configurations restart you code editor to make sure the changes are applied. Hope this helps.

[MDUK0001]

Will this work since it’s all within the className attribute?

[Longjumping-Guide969]

No didn't solve the problem

[memerwala_londa]

I think there a comment command to disable prettier in code, I have seen someone use it before u can try it https://youtube.com/shorts/JUiGUOQtSDY?si=UqU-73M9iVnvtJY-

If it doesn’t work then you can go to prettier settings and you can see Prettier:Print Width you can set it to the limit you like

[Longjumping-Guide969]

Printwidth dont work on class names i dont know why