Utility class usage linting

[tleish]

It would be nice to have a set of tools to help improve the usage of tailwindcss utility classes. I'm more interested a tool to help extract component classes and would use it by itself, but can think of additional applications in analyzing utility class usage.

Extracting component classes

With all the scanning and analysis of tailwindcss, it would be great if you could analyze the code and provide a report which might suggest areas to extract component classes. For example, using the HTML from https://v1.tailwindcss.com/docs/extracting-components

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Button
</button>

<button class="bg-gray-400 hover:bg-gray-500 text-gray-800 font-bold py-2 px-4 rounded">
  Button
</button>

It could report areas of 2+(configurable?) groupings of classes

2 sets "font-bold py-2 px-4 rounded"
  - path/to/file1.html:3
  - path/to/file1.html:12

If this was sorted by count it would give a valuable info for refactoring classes. Perhaps it could report the top 5 (again configurable?)

10 sets of "px-2 pt-1 pb-2"
  - path/to/file1.html:3
  - path/to/file1.html:12
  - ...
  
2 sets of "font-bold py-2 px-4 rounded"
  - path/to/file1.html:3
  - path/to/file1.html:12

Identifying invalid or unnecessary class sets

This report might look like:

Unnecessary class: "px-2 pr-2" => "px-2" path/to/file1.html:3
Duplicate class: "px-2 px-2" => "px-2" path/to/file1.html:3
Combine class: "pl-2 pr-2" => "px-2" path/to/file1.html:3
Overridden class: "px-2 pr-1" => "pl-2 pr-1" path/to/file1.html:3

Individual linting rules could be built up for this.

Do any tools for any of the above already exist?

[richardtallent]

The "Headwind" VSC extension sorts and removes duplicates.

I'm not aware of any other tools. Sounds like this could be added to Headwind, or possibly as a plugin for something like eslint-plugin-vue and/or the equivalent for React.