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!
I’ve complained about gap (and not only) 2 years ago. Ended up using negative margins
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(?)
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!
I had the same problem when developing a web application that should run on Zebra scanner devices (Android). As I remember, I also had a problem with the bg- class, specifically when I tried to use transparency, for example, bg-white/50. As I saw the Tailwind sets it by using the rgb(255 255 255 / 50%), but I found a solution by using an inline style with rgba(255, 255, 255, 0.5). This worked on that Zebra scanner device just right Is there a list of available classes?
to new devs reading this : the root issue is CSS support in UXP… not all props are supported and some may never be, using a superset of css (library/framework) will add a layer of obfuscation but under the hood these properties are still needed therefore some classes will not work entirely or partly.
there’s a discussion about CSS support in the forums and I encourage you to name properties that you think should be supported. I believe the UXP team is likely to add it if it makes sense.
Yeah, basically what @Maher said.
Even so, I also found Tailwind to be quite janky even with CSS that UXP supports.
I’ve found Uno to be a much better alternative.
Is there a list of available classes?