Tailwind UI Classes Organisation & Display

[T-low]

@T-low

I would also prefer a somewhat sorted order of the classes. For example, the hover state is in the middle of all classes. Which doesn’t exactly make it easy to distinguish between the classes.

An alternative could be to highlight the classes that are currently active, or highlight only the specific classes in the current state, as shown below for hover.

@Marius

The added TW classes require consistency/organization. This was also mentioned in the live. With TW, one easily has added 20-30 classes to a block in an instant and this would be quite chaotic, nicely expressed.

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

Cheers

[yankiara]

Hi,
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.)

[LauGau]

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).

[StrangeTech]

@LauGau

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

@LauGau

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.

@LauGau

apply to all breakpoints

For clients, there is this related feature request:

All breakpoints mode

It may be useful to have a way to apply your styles to the base breakpoint regardless of which one you are currently in. This will be very useful in the case of a client or editor who only does basic text formatting changes and/or adds components. They may add a component or block in the lg breakpoint and then apply styling to it, not realising their styles haven’t been applied (for example to the smaller breakpoints in a mobile first approach, or the larger breakpoints in desktop-first approa…

[antonijo01]

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.

[LauGau]

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

Automatic Class Sorting with Prettier - Tailwind CSS

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

[LauGau]

@LauGau

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).

I created a dedicated Feature request here:

Tailwind classes: allow to change breakpoint on right click and/or double click to edit

Problem: We often build pages on a large breakpoint. The problem is that all Tailwind classes are applied only for the large breakpoint. So now we have to delete the class, switch to the correct breakpoint and re-add our class… While an “apply to base mode” toggle somewhere would be handy, please consider the following: Suggestions On each Tailwind class add a right-click / contextual menu with: apply to all breakpoints (base) apply to breakpoint sm apply to breakpoint lg … apply to hover /…

Feel free to upvote.