Class name formatting about tailwindcss-intellisense HOT 24 CLOSED

Thanks for looking into this. I've handled CSS formatting in the past so I figured I'd offer some of that experience to this issue.

Existing Approaches

For developers that care about the order of CSS properties, there are two predominant approaches:

1. Group by type
2. Alphabetical

Group by type makes the most sense for Tailwind because alphabetical would result in a messy mix of variant classes.

Recommended Order

1. Non-Tailwind Classes
2. Non-variant classes grouped by type
3. Pseudo-Class Variants grouped by type
4. Responsive Variants grouped by type, escalating from smallest to largest breakpoint

Recommended Grouping

Grouping CSS properties by type has been handled in a number of formatters such as CSScomb. You might consider borrowing the groupings from CSScomb's default config.

If you define the order in a JSON config, it may even be possible for users to override it with a custom JSON config in VS code settings.

from tailwindcss-intellisense.

I did make an eslint plugin for this classnames ordering, it reads your tailwind config and you can configure the order if you want:
https://www.npmjs.com/package/eslint-plugin-tailwindcss

from tailwindcss-intellisense.

This VSC extension takes care of all the things: https://marketplace.visualstudio.com/items?itemName=heybourn.headwind

from tailwindcss-intellisense.

Closing this as we have no plans to add class formatting to Tailwind CSS IntelliSense. We are working on an alternative class sorting solution, so look out for that in the near future 👀

from tailwindcss-intellisense.

I wonder if we could borrow from how stylelint-order lets you customize it via json. https://gist.github.com/octoxan/1c0c24a75417f06096356e07d56be3c6

from tailwindcss-intellisense.

@huphtur headwind is cool but still has a lot of unsolved edge-cases: like no support for prefixed classes, missing classes from the latest TW versions, templated strings, etc. Would be really happy to see that supported by intellisense

from tailwindcss-intellisense.

I'd switch to VS Code from PHP Storm if this becomes a thing lol

from tailwindcss-intellisense.

Alternative solution is a plugin for prettier I think https://github.com/tailwindlabs/prettier-plugin-tailwindcss. Looks very good, but unfortunately prettier is not available for my programming language, ReScript.

So if there is no plans to integrate it into the extension, we have to use separate extension for sorting, I think.

from tailwindcss-intellisense.

Waiting for this feature so much!

from tailwindcss-intellisense.

any updates?

from tailwindcss-intellisense.

What class name ordering does tailwindui use? Perhaps that could be the opinionated method of declaring class name order.

from tailwindcss-intellisense.

I'd love if you could specify the ordering of properties, as everyone is very specific in their workflow once you start ordering properties a certain way, and maybe a dropdown option for non-tailwind classes to be at the start or end?

from tailwindcss-intellisense.

2. Suggest putting those first in the order as it could contain extracted components classes.
   eg: <button class="btn bg-green-500 hover:bg-green-400 text-white">

from tailwindcss-intellisense.

css-declaration-sorter may be of good use as well.

from tailwindcss-intellisense.

Has anyone done some work towards that so far? I'd love to have that thingy automated away from my thoughflow :)

from tailwindcss-intellisense.

This would be the biggest improvement I can think of for the tailwindcss experience

from tailwindcss-intellisense.

Any updates on this front so far? Can't wait to see this live!

from tailwindcss-intellisense.

@bradlc Headwind seems to fix this issue. It is popular and actively maintained.

No need to reinvent the wheel, right?

from tailwindcss-intellisense.

@bradlc Headwind seems to fix this issue. It is popular and actively maintained.

No need to reinvent the wheel, right?

Just tried Headwind. It currently can't sort variant classes with md:, lg:, etc.. They will be treated as "custom classes" and be appended to the end. Something like text-center sm:ml-auto md:text-left ml-2 will be formatted into something like ml-2 text-center sm:ml-auto md:text-left instead of ml-2 sm:ml-auto text-center md:text-left, which is not good yet.

from tailwindcss-intellisense.

@1isten The PR that tackled this issue was closed. I think it is personal preference, where the variant classes should be sorted.

from tailwindcss-intellisense.

it is personal preference

@cajakre Yep. After all there is no correct ordering. @bradlc 's example here just makes more sense to me. XD

from tailwindcss-intellisense.

@francoismassart Thanks, I will try that!

from tailwindcss-intellisense.

@bradlc please reference this issue when your alternative class sorting solution is made public.

from tailwindcss-intellisense.

so there is an emacs lsp-mode https://github.com/merrickluo/lsp-tailwindcss based on https://github.com/tailwindlabs/tailwindcss-intellisense and it use https://github.com/avencera/rustywind that is inspired by https://github.com/heybourn/headwind an non prettier class sorting that is obsolete

problem is prettier hard to setup especially when you use template engine like .erb

when I use headwind I just install the extension and its just works,

with prettier I got tangled by the settings and npm dependencies hell

from tailwindcss-intellisense.