[Feature Request]: Auto-wrapping of class attributes

[tobia]

Description

When using Tailwind CSS, sometimes the class attribute can become very long. Unfortunately, being a single attribute, this plugin does not wrap it. For example:

<span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 cursor-default leading-5 rounded-md dark:text-gray-600 dark:bg-gray-800 dark:border-gray-600">
  Previous
</span>

Suggested Solution

It would be nice to auto-wrap the class, splitting on whitespace and indenting its contents. For example, using appropriate printWidth and wrapAttributes options, it should format the class like this:

<span 
  class="
    relative inline-flex cursor-default items-center rounded-md border border-gray-300
    bg-white px-4 py-2 text-sm font-medium leading-5 text-gray-500 dark:border-gray-600
    dark:bg-gray-800 dark:text-gray-600
  "
>
  Previous
</span>

Which is arguably easier to read and to maintain.

Alternatives

An alternative is to use an utility such as @class and manually splitting the class into shorter lines:

<span 
  @class([
    'relative inline-flex cursor-default items-center rounded-md border border-gray-300',
    'bg-white px-4 py-2 text-sm font-medium leading-5 text-gray-500 dark:border-gray-600',
    'dark:bg-gray-800 dark:text-gray-600',
  ])
>
  Previous
</span>

But this is labor-intensive, error-prone, and foregoes any possible auto-sorting of Tailwind classes between separate strings in the array, even if #221 was implemented to allow sorting within each single string.

Additional Context

No response

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days