Support for Tailwind about streamsync

[Wazarr94]

One way of implementing it I have been thinking about is adding a "styling mode" (I'm not sure if this is the best term for it). Here's a quick and dirty html dom manipulation I made for example.

For the "Basic" mode, you would have the properties that you give atm. You could have an "Expert - CSS" mode where you give a textarea so someone can give any css properties and an "Expert - Tailwind" mode where you can give tailwind properties.

The rules in the expert modes may break the application, but I think it's acceptable given the tradeoff is that you get complete customization. If we accept this tradeoff then I think we can allow different styling methods for all elements.

About your last point, if we allow for styling in all elements, then I would remove the title property and add a text that I would style to be the title with properties such as text-slate-700 text-xl text-center.

Of course, there could be other ways of doing it, and I'm not an expert neither in Tailwind nor Vue.

[ramedina86]

Hi, the next release will support integration with custom CSS stylesheets, which will bring a lot of flexibility in terms of styling.

Given that Tailwind doesn't seem to be able to be imported/loaded dynamically, Tailwind won't be implemented, to prevent bloating of the runtime. I expect a minority to use custom CSS, and a portion of that minority to favor Tailwind.

[ramedina86]

Thank you, it's thrilling to hear about people liking it and using it!

I really like your idea. I'm not a fan throwing CSS around, but I'm aware how much devs value customisation. Tailwind might be a great option as it enables customisation but prevents chaos.

How do you imagine the implementation?

• For HTML Element components only
• For selected components
• For all components

If the latter, in a Section component with a title, how would you tackle the title specifically? Or would you be happy with just customising the outermost part of the component i.e. the "box" of the section?

[ramedina86]

I've decided to move forward with this, it'll be added to the roadmap as likely 2nd-3rd priority. I'll work on publishing a public roadmap so that everyone can be aware.

It'll be a great addition for more advanced use cases with minimal disruption to those wanting the basic experience.

[Wazarr94]

Very nice.
I've spent a good time reading the code, it shouldn't be too hard to add support for Tailwind in the HTML Element component in the first place. And the rest of components will follow, if necessary.
I'll try to file a PR tomorrow if all goes well.

[ramedina86]

I think the idea is great in general but there are a few design considerations and will probably take some iterations to nail it.

Perhaps for the moment you can focus on the following? Would be helpful

• Identifying npm package, what's the best version, is there a minified one
• Can we dynamically import to reduce the load size if Tailwind isn't being used?
• To check whether to import, how can we detect if Tailwind is being used? / Where are we storing this data?
• How can we deliver the best Tailwind experience? Autocomplete? Something like chips would be nice
• How do we actually apply these styles in a general way? It'd probably involve ComponentProxy

I like an expert/advanced switch of some sort, as you suggested, but I'm not sold on the dropdown. I'd like to do a few Figma mocks to see how to best fit this in terms of UX. There's also the consideration of the current CSS of HTML Element and how to integrate it to the new way.

I'm thinking something like

GENERAL

• Text
• Alignment
• etc
  STYLE
• Color
• Separator
• Custom styling
  ( Tailwind ) ( CSS ) - imagine these are grey chips like the "Default"/"CSS"/"Pick"
  [rounded-full X ] [mx-auto X] - these would be square chips with a X (remove) button, perhaps overkill and an input text will do

In summary, if you don't mind, please explore the more technical part first and I'll get back to you in terms of UX

[Wazarr94]

I've done a first implementation for HTML Element here: GitHub repository

I've used the latest tailwind version. The only problem I faced was that since no tailwind is used in the vue code, by default Tailwind remove all of its classes. I used a plugin to force tailwind to import some classes. I made a list which is incomplete of course, open to suggestions. We can't dynamically import Tailwind, but the css file doesn't get too big so I don't see much of an issue. The static directory was around 23mb before I used Tailwind and kept the same size after.

Normally, the styles you have used for your elements should override the tailwind styles (I'm thinking about the container class) so there shouldn't be a need for adding a prefix in Tailwind. In case I'm wrong, it is not hard to add a prefix in my code.

About the tailwind experience, I think chips would probably be hard to implement given the number of tailwind classes. I'm pretty sure a text input is ok.

From my experience, there is a need to give tailwind styling to other elements, such as text, button or layout elements. It can be complicated since your elements have many layers. PrimeVue managed to deal with this problem with a passthrough object: PrimeVue button.

There could be a new class property in the ComponentProxy which is an object that looks like the one they use. The builder interface would show the style for each element in the component.