simple_form_tailwind_css VS tailwindcss-stimulus-components

One option is the simple_form_tailwind_css gem by Abe Voelker, mentioned also in the GitHub issue. It uses a combination of default Tailwind styles in the Simple Form configuration with a custom form builder and a few custom inputs. The gem supports replacing the default classes related to error messages with custom ones.

The problem I have is the front end. I'm using Rails 7 with Tailwind and I'm hitting all sorts of problems. I don't need anything fancy, basically a form with few text inputs, dropdowns (single and multi-select), and numeric inputs. How do people implement these components? It seems like barely any gems support stimulus/tailwind, for example, Simple-Forms. I've found the workaround repo, but it seems more like a temp fix rather than a real solution.

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