tailwindcss-rails VS morphdom

You can't use additional CSS packages (like Flowbite) with the official tailwindcss-rails gem. According to this answered issue, you should either give up importmap and use a bundler, or use a CSS file from CDN - which is not ideal (unnecessary classes won't be purged this way).

You first install your asset handlers as you need them for your project. They can be anything from rails/jsbundling-rails and rails/tailwindcss-rails to webpacker or something custom.

Preconfigured TailwindCSS from TailwindCSS-rails ready to use out of the box, pass --css tailwind as an option.✅

Thanks to the magic of Rails, the scaffold generator gives us almost everything we need to start creating messages and associating them with users. Because we are using Tailwind via the tailwindcss-rails gem, the scaffold generator also includes some nice looking base styles too.

Because we are using Tailwind via the tailwindcss-rails gem, the scaffold generator applies some basic Tailwind styling to generated views, so we have nice looking Widget pages right out of the box.

Here's a simple way to achieve this, inspired by the tailwindcss-rails gem.

For more documentation on tailwind installation: https://github.com/rails/tailwindcss-rails

gem "rails", "~> 7.0.0" # The original asset pipeline for Rails [https://github.com/rails/sprockets-rails] gem "sprockets-rails" # Use postgresql as the database for Active Record gem "pg", "~> 1.1" # Use the Puma web server [https://github.com/puma/puma] gem "puma", "~> 5.0" # Use JavaScript with ESM import maps [https://github.com/rails/importmap-rails] gem "importmap-rails" # Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev] gem "turbo-rails" # Hotwire's modest JavaScript framework [https://stimulus.hotwired.dev] gem "stimulus-rails" # Use Tailwind CSS [https://github.com/rails/tailwindcss-rails] gem "tailwindcss-rails" # Build JSON APIs with ease [https://github.com/rails/jbuilder] gem "jbuilder" gem "redis", "~> 4.0"

When you generate an app with rails new --css=tailwind without a JS option, you get the tailwindcss-rails gem which includes the new scaffold generators. When you pass in a JavaScript option as well, you get Tailwind installed via cssbundling-rails, which does not include built-in generators since it offers more than just Tailwind as an option.

morphdom

And sure enough, it works! So what's going on here? Well, clicking the link invokes our reflex, which gets executed right before our current controller action runs again. It allows us to execute any kind of server-side logic, as well as play with the DOM in various ways, but with ruby code. Then, the DOM gets morphed over the wire.

It's super simple actually. And that is in large part to (Morphdom)[https://github.com/patrick-steele-idem/morphdom] which I'm using to compare the output of render() to what is already on the DOM. Morphdom will patch the differences.

I'm using morphdom to patch our DOM. Its a very simple library that compares two DOM elements and updates only the differences. It is extremely performant and does not even use a Virtual DOM, just the DOM you already have!

using HTML-diffing libraries like morphdom to efficiently update elements on the page

no it actually looks like morphdom is what i'm looking for.

It tries to morph into existing DOM (with https://github.com/patrick-steele-idem/morphdom). In case of fail, there is fallback to HTML replacement with outerHTML. All DOM operations after action occurs on component level, not the whole page.

Today, we’re going to build a live search experience once more. This time with StimulusReflex, a “new way to craft modern, reactive web interface with Ruby on Rails”. StimulusReflex relies on WebSockets to pass events from the browser to Rails, and back again, and uses morphdom to make efficient updates on the client-side.

Whenever the JavaScript on the browser-side receives new HTML, it will update the current page using a DOM-diff approach (using morphdom). So only DOM nodes that have actually changed between the initial page load and the updated HTML will be updated.

Updating the DOM is not slow. In fact, there are libraries and frameworks that emphatically reject the virtual dom approach. morphdom is one such example of a DOM modification library. Svelte's author Rich Harris has been proclaiming for a while that virtual dom is an overhead (see e.g. this article). Google's lit-html and lit-element do much of what react does without the virtual dom.