Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature Request]: Auto-wrapping of class attributes #285

Closed
tobia opened this issue May 30, 2024 · 1 comment
Closed

[Feature Request]: Auto-wrapping of class attributes #285

tobia opened this issue May 30, 2024 · 1 comment
Assignees
Labels

Comments

@tobia
Copy link

tobia commented May 30, 2024

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

Copy link
Contributor

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

@github-actions github-actions bot added the Stale label Jul 30, 2024
@github-actions github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Aug 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants