Using tailwind's prettier plugin

[niktek]

The tailwind prettier plugin embeds the svelte prettier plugin and mainly does class re-ordering within strings. I've done a dry run locally and the changes are not that drastic at all (mainly affecting doc pages) and I think there is benefit to having things like all base classes appearing in the string before breakpoint variants of the classes and uniformity across the code base.

Instead of pushing a PR to see the changes, you can just do:

npm remove prettier-plugin-svelte
npm i -D prettier prettier-plugin-tailwindcss
npm run format

And preview the changes in the Source Control panel.

[endigo9740]

I'm actually really not keen on this for Tailwind. The styles, while probably seemingly random, do adhere to some logical flow.

Loosely:

[descriptionClass][colors/positioning][width/height][margins/padding][animation/transitions][utilities(cursor, etc)]

Not sure how the plugin handlings custom versus TW classes in a set, but the one that would give us the most trouble would be the first one, the description class. This is what identifies each part of a component. (ex: parent and child descriptions below)

<div class="parentDesc {TW_CLASSES}">
    <div class="childDesc {TW_CLASSES}"></div>
</div>