Ask A Question

Notifications

You’re not receiving notifications from this thread.

Installing Tailwind with Rails 7

mwhocl asked in Rails

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?

Reply

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"

Reply

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?

Reply

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.

Reply

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...) ]

Reply

Why not stick with Bootstrap? Assuming it's missing something you want.

Reply

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)

Reply

This tutorial will walk you through the process of creating a simple Rails 7 application with Tailwind, Devise, and other libraries.

Reply

thank you so much

Reply

@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.

Reply

You rapidly end up creating a lot of custom CSS with bootstrap that you do not have to with Tailwind.

Reply
Join the discussion
Create an account Log in

Want to stay up-to-date with Ruby on Rails?

Join 82,160+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more.

    © 2024 GoRails, LLC. All rights reserved.