cssbundling-rails VS tailwindcss-stimulus-components

See the issue I opened on Github. [EDIT: closed by DHH recently]

In the Procfile.dev that's currently generated by the cssbundling-rails and jsbundling-rails gems, we can see that they write the web process like:

The functionality comes from https://github.com/rails/jsbundling-rails and https://github.com/rails/cssbundling-rails -- both come with Rails 7 and all you have to do is generate your app with the choices you want such as -j esbuild --css tailwind.

TailwindCSS from CSS Bundling for Rails - (this post)

Maybe https://github.com/rails/cssbundling-rails does what you want? For CSS only, afaik it's perfectly fine to mix different approaches for CSS and JS within one Rails app, so you could still use importmaps for JS.

The docs at https://github.com/rails/cssbundling-rails clearly state that

Install cssbundling-rails gem.

Propshaft has a smaller scope than sprockets and requires you to rely on the js-bundling and css-bundling gems to handle the building of CSS and JS assets. Read the docs for an extensive upgrade guide.

As you may know there's also a [CSS bundling](https://github.com/rails/cssbundling-rails). However, I've only upgraded a trivial project, don't know how involved that would be.

My question is I have seen tailwindcss-stimulus-components and wondered if there are any video tutorials on how to implement it?

If you don't want to pay for it, you can build your own, or use components other people have created, like tailwindcss-stimulus-components.

Tailwind CSS Stimulus Components

Have you seen this? https://github.com/excid3/tailwindcss-stimulus-components

yeah just got started. i’m using the gem at https://github.com/excid3/tailwindcss-stimulus-components for now, and i’m hard coding in all the transitions. but starting to get cumbersome. wondering if i should just use their react/vue components for anything pre-built, and write my own stimulus controllers for whatever limited needs i have. (goal is to leverage server side rendered html plus hotwire for most of the heavy lifting)

// Credit: This controller is an edited-to-the-essentials version // of the modal component created by @excid3 as part of the essential // tailwind-stimulus-components package found here: // https://github.com/excid3/tailwindcss-stimulus-components // In production, use the full component from the // library or expand this controller to allow for // keyboard closing and dealing with scroll positions import { Controller } from "@hotwired/stimulus" export default class extends Controller { static targets = ['container']; connect() { this.toggleClass = 'hidden'; this.backgroundId = 'modal-background'; this.backgroundHtml = this._backgroundHTML(); this.allowBackgroundClose = true; } disconnect() { this.close(); } open() { document.body.classList.add('fixed', 'inset-x-0', 'overflow-hidden'); this.containerTarget.classList.remove(this.toggleClass); document.body.insertAdjacentHTML('beforeend', this.backgroundHtml); this.background = document.querySelector(`#${this.backgroundId}`); } close() { if (typeof event !== 'undefined') { event.preventDefault() } this.containerTarget.classList.add(this.toggleClass); if (this.background) { this.background.remove() } } _backgroundHTML() { return `${this.backgroundId}" class="fixed top-0 left-0 w-full h-full" style="background-color: rgba(0, 0, 0, 0.7); z-index: 9998;">`; } }

Yeah, I made this to replicate the JS features of Bootstrap in Tailwind & Stimulus: https://github.com/excid3/tailwindcss-stimulus-components

this is extended from the original modal supplied from tailwindcss-stimulus-components