Add prettier-plugin-tailwindcss to sort tailwindcss classes

[portdeveloper]

Description

This PR adds prettier-plugin-tailwindcss to scaffold-eth-2.
By using prettier-plugin-tailwindcss, this PR aims to achieve consistency in classNames across projects using scaffold-eth-2.
Also, all necessary files that contain tailwind classes are sorted.

Additional Information

• I have read the contributing docs (if this is your first contribution)
• This is not a duplicate of any existing pull request

Your ENS/address: portdev.eth

[portdeveloper]

Seems like the official Tailwind CSS Intellisense vscode extension is the cause of this slowness, not ESLint. I disabled that extension and now everything works fine.

Sometimes even just saving the file takes too much time.
I would like other people to test this as well.

[rin-st]

Hey @portdeveloper, thanks for pr!
I have Tailwind intellisense extension, and for me everything works and works fast. We need to figure out why it's slow for you because disabling the extension for everyone is not the best solution

[portdeveloper]

Thanks for the insight. I am glad to hear that it is working out great for you! I think there might be a problem with my machine...

[technophile-04]

Tysm Port and Rinnat 🙌

I tried this on vscode with tailwind intellisense installed and it works fine for me 🙌

NOTE : My nvim lsp config is a bit messed up, so just sharing my personal problem when I was try to format in nvim it was adding some daisUI stuff at the top of the file after formatting :

Screen.Recording.2023-07-02.at.3.13.06.PM.mov

After researching some, I found this discussion:

1. Doing daisyUi.logs : false in tailwind.config.js solved the issue for me as suggested here -> [Prettier Plugin] prettier-tailwind daisy ui formatting issues tailwindlabs/tailwindcss#8380 (comment)

2. Its seems that prettier-plugin-tailwindcss had some incompatibilities with @trivago/prettier-plugin-sort-imports (which we are using....port also got kind of same error Add prettier-plugin-tailwindcss to sort tailwindcss classes #393 (comment) ).......check out this discussion about this issue:

   1. Incompatible with @trivago/prettier-plugin-sort-imports tailwindlabs/prettier-plugin-tailwindcss#9
   2. Although the above issue's was fixed I found people people still using some workaround like :
      Incompatibility with other Prettier plugins tailwindlabs/prettier-plugin-tailwindcss#31 (comment) also worth checking full discussion
   3. Also regarding Port's this comment Add prettier-plugin-tailwindcss to sort tailwindcss classes #393 (comment) while researching I found a person who had same issue and he resolved it by uninstalling and installing tailwind extention :), I am unable to find it now but it might be somewhere hidden here -> prettier-plugin-tailwindcss doesn't work with vscode tailwindlabs/prettier-plugin-tailwindcss#113

[portdeveloper]

One thing I noticed about prettier-plugin-tailwindcss is that it does not remove extra whitespaces in the classNames, and sometimes it just changes the places of two classes over and over again. This will hinder standardization.
I will open an issue on their github and see if they can fix it.

For now we can say that this is ready for review

[technophile-04]

Sometimes it just changes the places of two classes over and over again. This will hinder standardization

Yeah, I have noticed sometimes this issue too !!

Due to some issues in the plugin and also, I went through a few discussion's on this, and seems like not everyone likes it

Obviously, this is considered as best practice to have in "tailwind zone" but I think it not worth adding at the moment in SE-2 😅 due to some issues, maybe in future in se-2-docs if we have a section regarding best-practices/ extra tools we are for sure gonna recommend this !!

But tysm @portdeveloper for this, really appreciate it !!

[Pernick]

One thing I noticed about prettier-plugin-tailwindcss is that it does not remove extra whitespaces in the classNames, and sometimes it just changes the places of two classes over and over again.

Has anyone found a fix for this? This issue makes it really hard to use format check in CI.

At this point I've tried everything mentioned in this PR and some other things to no avail:

• reinstall VSCode extensions (tailwind, prettier)
• remove @trivago/prettier-plugin-sort-imports
• remove daisyUI logs
• try different prettier/prettier plugin versions with different import styles

I will open an issue on their github and see if they can fix it.

Did you find time to do this? Couldn't find any issues you authored.

I failed to replicate this issue with new Next.js + DaisyUI + Tailwind + ESLint + Prettier (w/ @trivago/prettier-plugin-sort-imports and prettier-plugin-tailwindcss) even with the exact versions and configs, wondering whether it has something to do with the monorepo structure. I'll post an update here if I figure it out.

[portdeveloper]

One thing I noticed about prettier-plugin-tailwindcss is that it does not remove extra whitespaces in the classNames, and sometimes it just changes the places of two classes over and over again.

Has anyone found a fix for this? This issue makes it really hard to use format check in CI.

At this point I've tried everything mentioned in this PR and some other things to no avail:

• reinstall VSCode extensions (tailwind, prettier)
• remove @trivago/prettier-plugin-sort-imports
• remove daisyUI logs
• try different prettier/prettier plugin versions with different import styles

I will open an issue on their github and see if they can fix it.

Did you find time to do this? Couldn't find any issues you authored.

I failed to replicate this issue with new Next.js + DaisyUI + Tailwind + ESLint + Prettier (w/ @trivago/prettier-plugin-sort-imports and prettier-plugin-tailwindcss) even with the exact versions and configs, wondering whether it has something to do with the monorepo structure. I'll post an update here if I figure it out.

I didn't open an issue and basically forgot about it. I think there is a vscode extension that does the same thing. If one day, there exists a solution for this that could be added to a CI/CD pipeline of a project, it will be great as a lot of the devs i saw, including me, just dont care about the order of tailwind classes.

[Pernick]

Adding this in case someone who struggles with this stumbles on this:

My issue was that I was using tailwind.config.ts instead of tailwind.config.js and in that case the prettier config needs to point the prettier plugin to the correct config with this:

"tailwindConfig": "./tailwind.config.ts"