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] Update tailwindcss ^3.4.0 #297

Closed
you0518 opened this issue Dec 21, 2023 · 9 comments
Closed

[Feature request] Update tailwindcss ^3.4.0 #297

you0518 opened this issue Dec 21, 2023 · 9 comments
Assignees
Labels
enhancement New feature or request feedback needed

Comments

@you0518
Copy link

you0518 commented Dec 21, 2023

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
Copy link
Owner

francoismassart commented Dec 28, 2023

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 :

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 francoismassart self-assigned this Dec 28, 2023
@francoismassart
Copy link
Owner

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
Copy link
Owner

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
Copy link
Author

you0518 commented Jan 6, 2024

@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
Copy link

Yovach commented Jan 6, 2024

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
Copy link

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
Copy link

stefanofa commented Jan 6, 2024

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.

image
image

@Serator
Copy link

Serator commented Jan 8, 2024

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

@francoismassart
Copy link
Owner

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request feedback needed
Projects
None yet
Development

No branches or pull requests

5 participants