Automatic Line Breaking for Template Literals in tailwindFunctions 🌟

[kimskovhusandersen]

Description

First and foremost, I'd like to express my deep appreciation for the incredible work that has gone into prettier-plugin-tailwindcss. It has significantly improved code formatting for many developers, and I'm truly grateful for the effort put into it. 🙏

I'd like to suggest a small enhancement that could make a big difference in code readability. Currently, when we use template literals for class strings within functions specified under tailwindFunctions, the code can become quite lengthy and challenging to read.

Feature Proposal

I propose that when a class string is defined using a template literal within functions listed under tailwindFunctions, and it exceeds the printWidth limit, prettier-plugin-tailwindcss should automatically break the string into multiple lines to improve code readability.

For example, if we have code like this:

className={cls`inline-flex h-[45px] w-[45px] select-none items-center justify-center overflow-hidden rounded-[100%] bg-[color:var(--black-a3)] align-middle`}

And the printWidth limit is exceeded, the plugin should reformat it as follows:

className={cls`inline-flex h-[45px] w-[45px] select-none items-center justify-center overflow-hidden 
rounded-[100%] bg-[color:var(--black-a3)] align-middle`}

Once again, thank you for your dedication to the developer community, and for considering this humble suggestion. 🙌

[ony3000]

Hello! I am leaving a comment because it seems to be a similar topic to #7763.

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