Suggestion for adding support for "related styles" (maybe by default)

[IHIutch]

So I've started using Panda on a project and it's great! However, I'm migrating from Tailwind and in a few places, I've noticed that Tailwind has a few clever classes that handle a few related CSS properties. The obvious ones are .truncate, their shadow classes .shadow-*, and their transition classes .transition-*. These are helpful because they handle related (like truncate) more complex (like transition) CSS properties. Their font sizing utilities also handle logical line heights, for example.

My idea is that Panda offer similar props to handle things like these. So instead of having to write transition: all ease translateX(token(sizes.6)) I could simply write transition: translate-x-6.

Perhaps you can handle some of these things manually using layerStyles. Panda already does have some built-in logical complex styles like the shadow prop. But I think there are some additional properties that could be simplified in a similar way.

Anyway, that's my biggest "complaint" working with Panda so far. If anyone has suggestions of how you're handling things like this in a graceful way, let me know!

[anubra266]

@IHIutch
you can truncate in panda
https://play.panda-css.com/Ig2qgpKAr9
You can use shadows
https://play.panda-css.com/oYqMg-NrWO
About transitions, I'm not sure I understand, nor can I find something of the sort in the tailwind docs to help me understand.

[IHIutch]

Yeah, Im familiar with shadows from using Chakra and I did see that Panda supports this as well. Truncate I didn't seem to be able to get working, but I'll try again using your link.

Regarding transitions and transforms, you can see examples of those under these major sections:

• Transitions
• Transforms

What I think I was communicating, albeit poorly, was that some CSS properties are fairly complex or verbose by default. So exposing simplified props (like shadow forbox-shadow and truncate, which combines several props) makes my life much easier. What I think Tailwind does cleverly is things like their .transition-* which combines logical transition-properties and also adds a thoughtful transition-timing-function and transition-duration automatically (similarly to how truncate works). While you can still modify the Timing Function or Duration explicitly, the .transition-* provides good defaults and acts as a shorthand (like shadow).

---

Let me give one more example of the type of "shorthand" I'm referring to. Out of the box, Tailwind sets a border property on all elements: *{ border: 0 solid #e5e7eb} . This usually means that I never have to define a border-width property AND a border-color property, unless I explicitly want a different color (most of the time, I've found, I dont). With Panda (and Chakra) you do have to define both explicitly every time because there is no global default color (as far as Im aware).

Its a small thing, but I think the DX wins would be really big, especially given the explicit nature of Panda. As mentioned, you're already doing it for things like shadow and truncate. I just came across a few situations when migrating from Tailwind to Panda where I wish I could have used similar clever props (for transitions, transforms, borders, and such).

[anubra266]

@IHIutch for the global preferences you mentioned like borderWidth, you can set them in the globalCss key of your config.