UI Builder and Tailwind CSS

Is it possible to combine UI Builder and Tailwind CSS? Thinking it would be awesome to be able to create app UI in UI Builder and then use Tailwind CSS for styling, although my understanding is that UI Builder applies some element styling for layout, etc., right? Would this bring about conflicts?

Haven’t tried anything yet as I’m not overly familiar with the Tailwind CSS framework and it has been a long time since I did any work in CSS (the last framework I tried was InuitCSS from years ago!), but I’d like to understand what’s possible in terms of app styling with Tailwind CSS and building the UI with Backendless (including the logic, etc.).

You could enable Tailwind as external library at UI Builder - Settings - Libraries

Regards, Dima.

Thanks, Dima. I had a play with that and could see that when applying a Tailwind class to an element e.g. text, it works! :raised_hands: It also appears that you can dynamically see this in UI Builder without having to preview, which is quite cool. :sunglasses:

The only problem I seem to be coming up against is that SDK styles appear to override certain aspects. For example, when styling a text input that has the Standard variant, the class does not appear to apply. As it does not seem possible to clear the default style, I’m guessing that I’d need to do overrides in the theme settings? Looking at the docs, I can see at the bottom of the page it states: “When customizing or creating a new theme, you should use the variables and styles from the provided UI SDK Styles listing.”

In this case, would I be right in saying that incorporating Tailwind CSS would not be 100% possible?

It’d be very cool if there was a way to normalise the theme and use Tailwind classes but retain layout in UI Builder so as not to create weirdness when editing containers, blocks, etc., and retain the preset responsiveness. I know you can also add layout using Tailwind CSS but would be nice to separate style from layout.

Are there plans to consider Tailwind CSS for UI styling and - if not - is there any (or plans to create) other documentation that provides LESS styling per component e.g. if I wanted to style buttons globally, I could just view the input component styling docs and make my global changes?

Also, appreciate I’m not a paying customer at the moment, so do let me know if I’m overstepping the mark in terms of my questions. :slight_smile: Thanks!

There are a lot of questions and ideas and a lot of them are crossing. So I will tell you general things, and if something still is unclear, let me know, please.

  • Taildwind support is not planned out of the box - the main reason as we already use the part of Bootstrap classes, and MUI for some of the basic components.
  • If you want to achieve full Tailwind(or other UI framework) support - you should create and maintain your own custom components instead of ones of ours that use MUI.
  • Less variables will help you to style most of the components, but Tailwind is not related to it, and won’t help here.

Regards, Dima