Tailwind UI Classes Organisation & Display

Hope the quoting is ok and is not too pulled out of context @Marius :wink:


I agree with this.

Personally I would first order classes by breakpoints, then within each breakpoint, by state (like :hover).

And I would also use color variations to help quickly locate everything.

Maybe tints/shades of blue for the different breakpoints, and then some different border or a small icon for states in the different breakpoints?
(So that all TW classes remain the same color for better consistency and visibility with other classes like global/virtual.)

1 Like

On each Tailwind class I would also love to be able to right-click and have

  • apply to all breakpoints
  • apply to breakpoint sm
  • apply to breakpoint lg
  • apply to hover / remove hover

OR (maybe even better) :

Allow us to double-click a tailwind class to rename it directly from the list (so we can ask breakpoints/states/groups easily).

These are useful development shortcuts.

For clients, there is this related feature request:


Yes, that would be great.
Use color variants and sort by category (breakpoints, states, …) so it is visually easier to recognize where to look for a utility class.


For the ordering logic, I recommend matching the Prettier one:

We can argue about some details, but it has the huge benefits to be a standard.

I created a dedicated Feature request here:

Feel free to upvote.