[Feature request] Update tailwindcss ^3.4.0

[you0518]

Is your feature request related to a problem? Please describe.
In 3.4.0 of tailwindcss, subgrid, size, etc. were added.

However, using them in the current version will result in no-custom-classname.

Describe the solution you'd like
Please update tailwindcss to 3.4.0

[francoismassart]

Hi,
I'm finally feeling better after quite an intense flu session ! (3 weeks)

I started migrating the entire plugin in TypeScript in a private repository for now.
I will publish it here, once it is decent enough 😅 but since it'll take some time to complete it, I started working on updating the plugin for 3.4.0.

https://github.com/francoismassart/eslint-plugin-tailwindcss/tree/feat/tailwind-3.4.0

I follow the changelog from https://tailwindcss.com/blog/tailwindcss-v3-4 :

• Dynamic viewport units
• New :has() variant
• Style children with the * variant
• New size-* utilities
• Balanced headlines with text-wrap utilities
• Subgrid support
• Extended min-width, max-width, and min-height scales
• Extended opacity scale
• Extended grid-rows-* scale
• New forced-colors variant
• New forced-color-adjust utilities

The size-* will be integrated with the autofix of the enforces-shorthand rule, merging w-* and w-* into size-*.

I'll publish a beta version with the support for 3.4.0 soon and I'll counting on your feedbacks.

Cheers

[francoismassart]

Here is the beta version ready for testing with Tailwind CSS 3.4.0
npm i eslint-plugin-tailwindcss@3.14.0-beta.1

Feedbacks are welcome 👍

[francoismassart]

I could test it out on a real project on monday. Has anyone else tried ?

npm i eslint-plugin-tailwindcss@3.14.0-beta.1
+
npm i tailwindcss@3.4.0

cc @you0518 @lassenorgaard , @tomsdob, @martinsjek, @RobertsG, @michaeltugby0, @Serator, @Yovach, @AleksandrIvanenko, @stefanofa, @Stradi ...

Thank you for your feedback

[you0518]

@francoismassart

npm i eslint-plugin-tailwindcss@3.14.0-beta.1
npm i tailwindcss@3.4.0

We have confirmed that this version works. And we also confirmed that the new tailwindcss/enforces-shorthand appears.

 Warning: Classnames 'h-full, w-full' could be replaced by the 'size-full' shorthand!

Thank you!

[Yovach]

Hi @francoismassart, sorry I didn't see your previous message.
Here are the rules I use with your plugin:

  ...
  "rules" : {
    "tailwindcss/no-custom-classname" : "warn"
  },
  ...

I just tested the lint command (without the fix), it shows me some shortcuts (h-5 and w-5 to size-5) and "invalid Tailwind CSS classnames order".

I've tried --fix and it seems to work.

Thanks!

[stefanofa]

Sorry @francoismassart, I didn't see the comment either because I didn't get the notification.

Anyway, I tested the version you mentioned on a couple of medium/large projects in production and it seems to work, even the automatic fix. The only things that were present though were h-* and w-* to size-*.

Thank you for your work, it is really a great value :)

[stefanofa]

I just noticed that in one place the class min-w-[12rem] is used, which could be replaced with min-w-48 but is not reported by eslint.
However, I do not know whether this is preferable or not.

[Serator]

@francoismassart Looks like everything is working as expected. Thanks!

[francoismassart]

@stefanofa, yes! A rule autofixing the arbitrary values classnames by equivalent classnames from the config is a good idea.
I added a note about it in the README