Draft: v4

[francoismassart]

v4 Draft

Description

• Version 4 of the plugin will be a full rewrite compatible with Tailwind CSS v4
• Written in TypeScript
• Mostly based on prettier-plugin-tailwindcss
• It'll not support previous versions (no backward compatibility)

[Kamahl19]

@francoismassart Hey, thanks for the great plugin. I was just thinking how is the v4 rewrite going? Is it still happening and if so, do you have a rough idea when it might land? I cant imagine using tw without this plugin so it is basically a v4 blocker for me :D No pressure :D

[Kamahl19]

It might be useful to re-evaluate the necessity and priority of rules and only implement 2 or 3 most important for tw4. Here are the current rules with my personal opinion:

• classnames-order - not important as it is covered by the official tailwind prettier plugin
• enforces-negative-arbitrary-values - nice to have but not the most important imho
• enforces-shorthand - very nice to have, slightly higher priority
• migration-from-tailwind-2 - unnecessary anymore
• no-arbitrary-value - turned-off by default, not important
• no-custom-classname - imho the most important, catches lots of issues, even more if you are using tailwind prefix and forget to add prefix to the class
• no-contradicting-classname - very nice to have
• no-unnecessary-arbitrary-value - nice to have

I understand that to implement the 1st rule it is necessary to build the foundation of the plugin (resolving config etc). But maybe it is something that can be inspired from the prettier tw plugin. Then I would suggest to implement these rules, possibly each in a separate release to split the work into smaller chunks:

• no-custom-classname
• enforces-shorthand
• no-contradicting-classname

It is possible that after the foundation and the 1st rule is done, someone else contributes the next rule (I would).

Later releases might include:

• no-unnecessary-arbitrary-value
• enforces-negative-arbitrary-values

The rest is questionable imho.

[Bricklou]

• classnames-order - not important as it is covered by the official tailwind prettier plugin

Does this mean peoples also needs the prettier plugin to be able to sort classes?

• migration-from-tailwind-2 - unnecessary anymore

A migration-from-tailwind-3 could be made to fix the small breaking changes to prevent with v4.

[Kamahl19]

Does this mean peoples also needs the prettier plugin to be able to sort classes?

Tailwind has an official prettier plugin for sorting https://tailwindcss.com/docs/editor-setup#class-sorting-with-prettier . I am using it even now and disabled the eslint sorting rule. No need to re-implement something that already exists.

A migration-from-tailwind-3 could be made to fix the small breaking changes to prevent with v4.

There is a CLI tool to migrate to v4 which should take care of everything. Such rule is usable only once, after the migration, and then it is useless. You can do it manually instead of using linter for that.

[ImBIOS]

Shit! I should do my homework to search PRs, my bad:

• feat: migrate to TypeScript and support TailwindCSS v4 #385

But, because this PR has seemed stale for a long time, I might be going to working on my "urgent temporary solution", feel free to close that one or just continue my work, I see this PR just delete all the files.

[kachkaev]

A quick note on #381 (comment):

classnames-order - not important as it is covered by the official tailwind prettier plugin

Although prettier-plugin-tailwindcss has the 'official' status and is mainted by the TailwindCSS team, it is doing something unconventional for Prettier. See Prettier docs:

What Prettier is not concerned about

Prettier only prints code. It does not transform it. This is to limit the scope of Prettier. Let’s focus on the printing and do it really well!

Here are a few examples of things that are out of scope for Prettier:

• ...
• Sorting/moving imports, object keys, class members, JSX keys, CSS properties or anything else. Apart from being a transform rather than just printing (as mentioned above), sorting is potentially unsafe because of side effects (for imports, as an example) and makes it difficult to verify the most important correctness goal.

Reordering classnames inside a string is out of Prettier’s scope, including its plugins.

eslint-plugin-tailwindcss provides a superset of features compared to prettier-plugin-tailwindcss. These two tools do not need to be used together, just eslint-plugin-tailwindcss is enough. There is no need to remove classnames-order. A mismatch between 'official' class name ordering and the one from this plugin is tracked in #231.