Installing Tailwind with Rails 7
I ran the config for Tailwind with CSSBundling Rails using ruby 3.0.3 and rails 7.0.0:
rails new hg -j esbuild --css tailwind --database=postgresql
Everything worked fantastic trying any of the html code samples from tailwindui.com except for the hamburger menu in mobile. The hamburger menu did not work on a single code sample. Did I miss something additionally I needed to do?
The hamburger menu needs your own JS . You need to add an event listener to show and hide the menu . it is mentioned on the Tailwindui website check the heading of your snippet it says "Requires JS"
Well unfortunately I didn't want to have to learn js. Gosh I hate this. Rails and Tailwind is enough for me right now. Bootstrap you just drop the stuff in and the basics work. I don't understand why tailwind didn't do the same thing. They give you some great sample code components to start with but then they don't work properly because then you have to figure out js. It's disappointing actually. Can anyone point me to the actual js code I need to put in and where I put it in a rails 7 app to get the second sample under landing pages on the tailwind components page to work using html?
you can install something called "Stimulus Components". They have a bunch of standard tailwind based elements such as dropdown, modals and more. there should be something to use for the hamburger too.
There are fine solutions that are CSS-only, that also fit in very well with the flexbox and viewport detection paradigms. I suggest those be investigated. [ one development mindset is to avoid JS if it can be done in CSS (separation of concerns, less dependencies, etc...) ]
Well, Bootstrap is quite heavy compare to Tailwind and offer less control out of the box.
You rapidly end up creating a lot of custom CSS with bootstrap that you do not have to with Tailwind. Also, the JIT included in Tailwind makes the bundle pretty small. Now that I have tasted Tailwind I do not want to go back to Bootstrap (tried Bv5 few week ago... and dropped it).
I'd like to add one thing before wrapping up this post: there are predefined UI for Tailwind. Some are paid, some are free, some are maintained by the Tailwind team, some are independent projects.
I suggest reading https://superdevresources.com/tailwind-ui-kits/ (not an exhaustive list, but already a good starting point)
This tutorial will walk you through the process of creating a simple Rails 7 application with Tailwind, Devise, and other libraries.
@Stéphane Paquet Makes sense. Fight Bootstrap or find a predefined kit. The one thing I don't like is that the HTML gets messier or longer anyway. Maybe better if my editor could collapse the 'class' on demand.
You rapidly end up creating a lot of custom CSS with bootstrap that you do not have to with Tailwind.