Tailwind/Bootstrap?

Is Jumpstart Pro Tailwind only? Or is Bootstrap still in there?

Also, what about jQuery? Or is all the front-end javascript done with Stimulus JS now?

Werp. Just found it in the docs!  🙌

"Jumpstart leverages Stimulus.js for a variety of interactive components."
"This application template utilizes Tailwind CSS as a utility-first approach"

Yeah! So we basically built a lot of Bootstrap similar classes using Tailwind. That way you get the best of both worlds. 

The utilities have been amazing to have to make tweaks to the design as needed. That was always the hardest part of customizing Bootstrap.

And feel free to add jQuery into Webpacker if you need it. We don't use it anywhere by default, but you're welcome to.

I'm still a little unclear.  Is there a way to use Bootstrap instead of Tailwind?

You could, but you'd have to replace all the HTML and CSS that Jumpstart Pro comes with Bootstrap. Defeats a bit of the purpose of Jumpstart Pro, I guess though.

Yes, I think that's my dilemma because I generally like to use templates for HTML (typically built on Bootstrap).  I like the functionality of Jumpstart Pro, but I also like the ability to integrate a theme I like, built on Bootstrap, so I spend less time getting the look I want.

Ryan, I would have agreed with you a few days ago, until I started peeling back the docs on tailwind.  I actually think I may end up liking tailwind more than bootstrap because of the flexibility once you understand the idiosyncrasies of it.  (Who knows, I could just think it is cool because it is newer to me and a few months from now not like it at all, haha).  I definitely like the idea of a flexible grid system though, each row can be it's own individual object(per-say) and behave how it is designated.

Can you use both?  There are many features that just come out of the box from Bootstrap.  Do you know of any conflicts?

To add to my last post - I guess where I am coming from (as being new to Tailwind) it was nice having all those default layouts built.  Form example I am adding in some radio buttons and from what I see here I have to build the CSS from scratch to get the layout I want.

Bootstrap conflicts in several areas as it reuses some of the same class names unfortunately.

I'll be updating the forms shortly to use these for nicer radio buttons and checkboxes. https://tailwindcss-custom-forms.netlify.com/

Were you trying to add in styled radio buttons or something else?

Dan Tappin That's also where I'm at.  I can see the benefits of Tailwind that Chris Oliver and Brandon B. pointed out.  I suppose it may come down to how you implement your UI.  If you generally do something custom, then Tailwind seems awesome.  I typically don't start with a custom design from scratch - I usually start with a theme/UI kit (which are usually still built off of Bootstrap - looking at ThemeForest, there's only one UI kit that mentions Tailwind).

If anyone knows of a place with TailwindCSS themes can be purchased, that might also help me found a few sites with about 10 themes, but none more).

Considering any theme you purchase will require you to blow away your HTML and replace it with theirs, it may not be too bad to just remove Tailwind and replace it with Bootstrap if you don't mind rewriting all the HTML. We can look into this as an option.

Chris Oliver thanks for the update. Just like the Bootstrap basic vertical and horizontal.

As for tailwind / bootstrap I would suggest support for both. I agree with  Ryan Chin   that Tailwind is the way to go with a custom UI. In my case I don’t need that and Bootstrap with some minor CSS will allow me to build and deploy my app must faster.  Bootstrap also has tons of support in third party gems etc.

At this point I think I am going to replace Tailwind with Bootstrap.  Chris Oliver  any pointers to quickly and fully disable Tailwind?

Dan Tappin You could just modify tailwind.config.js and add a prefix and then add Bootstrap.

module.exports = {
  prefix: 'tw-',

Then all your Tailwind classes are still available, they just require the "tw-" prefix. Bootstrap doesn't provide near enough utilities for aligning things, so you'll almost certainly still want to keep Tailwind and this would be a good way of having both.

Thanks  Chris Oliver .  Follow up question: If I make this change do the existing scaffolds build the forms with that new prefix or am I manually adding them?

It’s probably too late now with Jumpstart but perhaps that should be set by default so that future users are not required to go back and edit all their Class tags.

Chris Oliver If you update the "I'll be updating the forms shortly to use these for nicer radio buttons and checkboxes. https://tailwindcss-custom-forms.netlify.com/" how can I, with an already created test app, pull the changes into my current app?  

Also, since I am already basically on that issue - what is the best way to use the jumpstart template to ensure easy updates in the future?  On the first test app I just downloaded the zip and ran the updates and npm commands, etc. from the zip extraction that I put in rubymine.  I do understand this is likely not the best way to do this at all but I wanted to get started quicker than normal just to test out what all the template can do.  Now that I better understand, if I were to start a real app using the template from scratch, what would be the best practice to ensure future updates can be applied with a command, and not needing to copy paste the files into the directories?

Thanks

Brandon B.   thanks for the tip. That was what I was looking for. I may be able to avoid installing Bootstrap 👍

I asked the same question and Chris Oliver answered that on another thread. You fetch the repo, merge then push. There will be some manual editing for the conflicts.

'The instructions for updating your repo to the latest version are included on the license page. You'll have to set it up as a git remote and merge changes down.'

I had a closer look at Tailwind.  I think I am onboard with it. It's quite powerful now that I understand it's features and functionality.  The Bootstrap items I am missing are the grouped buttons, form items, dropdowns etc.  Those pre-rolled interface items are nice to have without having to build the CSS from scratch.

For anyone new to Tailwind I highly recommend watching some of Adam Wathan's 'Rebuilding...' videos on YouTube where he takes an existing website and rebuilds the design in Tailwind live, piece by piece.

You'll see how crazy fast and flexible Tailwind is. Granted, he's the creator so he'll know it better than anyone else but it does show how you can build layouts and components that are not possible with Bootstrap.

Dan Weaver he has a book also https://refactoringui.com/ that I think all tailwind users should check out. Here is a talk on youtube related to this https://m.youtube.com/watch?v=7Z9rrryIOC4&t=1192s

👍  Guled Ali   Dan Weaver  

I wonder though is there any full fledged themes out there for tailwindcss similar to the ones bootstrap offers.
https://themes.getbootstrap.com/

Michelle Hartley Adam Wathan, the creator of tailwind tweeted a while ago that he was working on a building component library similar to bootstrap. Which you can easily customize.

Here is the tweet https://mobile.twitter.com/adamwathan/status/1112101755888648192

I like tailwind but I suck at designing and I’m lazy too

That's cool. I'm a huge bootstrap fan. I'm not using tailwind in my application. But, it is pretty nice though.
 Bulma Is pretty nice too especially for those who aren't designers. 

I noticed that the new Tailwind templates just released this past week by Adam Wathan are all .jsx files/React/Next.js. There isn't a html code choice option like in his previous components. Can these be used in JSP? If so how did you convert them for use?