tailwindcss-stimulus-components VS Stimulus

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

I also recommend checking out the docs for Stimulus and Turbo to familiarise yourself with all their features and the APIs used in this series.

Any tips on preparing to work with Wiz as an incoming intern. I heard its identical to Stimulus: https://stimulus.hotwired.dev/

use Stimulus

With Stimulus, you've got a powerful tool to take your app's interactivity up a notch. For even more awesome features and Stimulus wizardry, check out the Stimulus Documentation.

The next version of Stimulus makes it easier to access parts of the private API thanks to my pull request.

I like Stimulus, it was a bit pushed by Symfony with their ux thing.

I thought it'd be https://stimulus.hotwired.dev/ for a minute but I think that ecosystem is tied too closely with rails.

Hey HN!

For those new to Rails, Stimulus (https://stimulus.hotwired.dev/) is a way to sprinkle frontend javascript code into your Rails views.

I held off using Stimulus in my Rails apps for a long time because I didn't understand it — the data= attributes looked weird, and the connection between my Rails views and Stimulus javascript controllers was confusing.

So I decided to write the guide I wish I had when I was learning Stimulus.

Hope you enjoy it! I'm happy to answer any questions, feel free to ask any.

Thanks, Harrison

Hey /r/rails, these past few weeks, I've been working on a beginner's guide to Stimulus and I'm excited to finally share it!