Tailwind CSS support

I’ve seen already 3 different conversations about tailwind, but nobody actually opened a request. So here it is.

More information:
Official Website
Twitter profile
Adam Wathan’s twitter profile(Creator)

Wappler Posts:



Although Tailwind UI will be a paid-for addition, it will certainly speed up development time.

2 Likes

I have just been through the Tailwind UI Kit FAQ and License and even if paid it looks like a very good deal. On top of development speed you get “Use on unlimited projects” with all their packages. I, for one, would most probably buy a license just to support these guys.

Nonetheless the Tailwind CSS framework is amazing by itself and it uses MIT license.

6 Likes

bumping this request.

1 Like

Bumping this again.

2 Likes

Hello Wappler Team we need this for yesterday, the themes market today is paying more attention to Talwind than to bootstrap.

@George

1 Like

@AdrianoLuiz could you please provide some proof link where you get this statistics?

I have a huge doubts that commercial product has more spread than free-to-use.

1 Like

The tailwind library is free, but there is a difference with bootstrap. Bootstrap is a UI framework which gives you a complete package with components. Tailwind only gives you the utilities to create your own components and you have full control over it. The paid part is tailwind UI, it is a complete UI component set with also a lot of templates that was created with tailwind. There are also enough bootstrap templates where you have to pay for.

Tailwind is mostly popular by users using React, Vue, Svelte etc. because it was created for building your own components. I believe it is indeed a lot more popular now then bootstrap. I also have used it and really love it. Not sure if it is suited for Wappler, most users just want ready to use components which they can adjust a bit to fit in their design.

9 Likes

it would be nice if Wappler at least understood the components because when importing a theme with tailwind it gets completely lost

Well you can use the code view for that. Wappler UI doesn’t support tailwind.

1 Like

yes, hence the request for this topic. :blush:

My previous “previous” job I coded static front end pages using Tailwind(with a lot of the components prebuilt from the paid UI framework) for our developers to use with LiveView & Elixir programming language. I also upvoted this feature because I enjoyed the freedom Tailwind enables with it’s vast multitude of classes where you get granular control over every element, BUT after reading @patrick’s comment I realised the “controlled freedom” Wappler allows is the reason we use it, enjoy using it and most of the time we can be 2 to 5 times more productive than a react/angular developer. We can focus on building working apps without much worry about every little detail like sizing, scalability and positioning of components. And believe me it is a rabbit hole I preferably pass by.

2 Likes

The main disadvantage of TailwindCSS is imho the big classes redundancy when used directly. Like when styling the same buttons over and over again you have to add all the same 20 styling classes to make your button style for example.

So instead of having your styling separate in css files you are having it back inline in the html. This is a bad practice.

Yes I know that tailwind shines when you go and use it in components but then you will have to build all the components self first and then reuse them. Something that is given in bootstrap as ready to go UI components but you have to purchase separately as tailwind UI

3 Likes

Even though I opened this FR I am not so sure either. Besides bundle size and tooling I don’t see how would this make my life easier.

A completely different story would be if Wappler changed to a pixel-perfect design paradigm. They could then build a drag&drop experience and take advantage of tailwind’s JIT compilation.

But do we want that?

Now I’ve thought about it, I don’t think I do. Bootstrap works too well.

1 Like

Just a thought. Me personally happy with bootstrap. (I find tailwind easier to use but few google searches fixes any issues I have with bootstrap)
But thinking in terms of adoption, do you think having tailwind just as option would greatly help bringing people on board?
I know for me knowing wappler was bootstrap instead of tailwind, I was a bit put off by it, because of all the hype around tailwind, I just assumed bootstrap was bad due to lack of research by me. I assume a lot of people would be like that tho.

But then you’re just also adding another thing that needs to be maintained.

Nowadays we create layouts very simply with builders, One day Wappler may have a constructor like this

1 Like

I’ve not come across Shuffle before. Are the files it produces easy to bring into Wappler? I assume, as it’s all standard bootstrap classes, you just copy the files into the project and Wappler works happily with them? Can you still use the Wappler theme manager to adjust colours, etc.?

https://shuffle.dev/ :beers: :handshake:

Thanks for that. I already found the site and have had a good look at it but have these questions…