Tailwind classes UX

Hey, I have 2 suggestions for the Tailwind classes workflow.

  1. It would be great to have an indicator on each breakpoint that has any styles assigned. I know that Tailwind classes are named in a way that we see when they are applied, but some kind of a dot (like on the screenshot) or something similar over each styled breakpoint would be a good, visual way of showing this.
  2. It would be great to differentiate Tailwind classes that come from an assigned style and inline classes. Classes marked with arrows are inline, but I have no way of knowing it right now. Maybe just a different color?

I think that both these changes would greatly improve the Tailwind workflow in Pinegrow :slightly_smiling_face:

2 Likes

@matjaz Hey, I was just in the process of creating a new post on this, but it turns out I already asked for this a year ago… :smiley:

First point is fixed already, but the second point is still a problem. For example, on the screenshot below, the underlined class comes from Inline Styles, but there’s no way of knowing that. I have the Class Style selected and it shows the Inline class exactly the same way as the other classes plug the class from the Class Style is hidden, which may add to confusion.

image

By inline classes, are you referring to non-tailwind classes that either added using a style tag or via an external css file?

Non-tailwind classes does show-up in a different color (lighter blue shade) already.

I mean the “Inline” you can see on the screenshot. I have a Class Style called “Section” which is a set of Tailwind classes. Then I added a different padding class on the Inline level to modify this particular section without changing the “Section” Class Style globally, by clicking the “Inline” button on the right of “Section”. Now the padding class that’s inside the “Section” Class Style is not visible at all, and I can see only “lg:py-32” added as Inline, but it’s displayed like all the other “Section” Class Style classes, so there’s no way of knowing which class comes from a Class Style and which from Inline Style.

Thanks for explaining! I understand your use case now. I have updated this post category to Feature Request for now.

2 Likes