All threads / Installing Tailwind with Rails 7
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?

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

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

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.

Join the discussion

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

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

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

    logo Created with Sketch.

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

    © 2022 GoRails, LLC. All rights reserved.