Tailwind - not all classes functioning

Photoshop UXP Plugin API
, , ,
1

Anyone had any success with Tailwind in UXP?

I’ve got it partially working within a Vue 3 instance but not all the classes appear to be functioning. So far I’ve got flexbox classes working, but not gap. I’ve had bg-[color] working (albeit very inconsistently), but not text-[color], text-[size] doesn’t appear to work either. I’ve tried these classes on both Spectrum Typographic elements and vanilla HTML.

I’m also finding that I have to do multiple reloads for some Tailwind classes to apply, but others happen instantly, and with no consistency.

I will stress that I’m running this in a Vue 3 instance and with Webpack.
Am I right in thinking that UXP and CSS are a bit funky?

I fully appreciate that neither Vue or Tailwind are expressly supported in UXP; this is mostly a purely experimental exercise on my part (although I plan to release the Vue stuff as a starter plugin soon). - I’d just like to know why it’s not working!

2

I’ve complained about gap (and not only) 2 years ago. Ended up using negative margins :man_shrugging:
I believe text color works not on all elements (IIRC on sp-button it doesn’t work, but I might be wrong now). Could be same with size maybe(?)

1 Like
3

Ah! I think that post was why I had it in the back of my head that UXP doesn’t implement a full CSS engine.
I’ve found that at least in terms of text classes a full restart of the plugin (including Webpack) seems to solve the issue; well, at least in terms of vanilla HTML, I’m yet to fully test it with Spectrum components.

@Erin_Finnegan would it be possible to get a list of available CSS added to the docs? It would save a lot of headbanging!

4

Absolutely - this is a good one for @pkrishna

1 Like