Tailwind CSS and Stimulus

1

I’m curious to get a sense of who is using Stimulus with Tailwind CSS and how others go about it?

Do you use something like the stimulus components library - https://www.stimulus-components.com/ or maybe this package? GitHub - excid3/tailwindcss-stimulus-components: A set of StimulusJS components for TailwindCSS apps similar to Bootstrap JS components.

Or does everyone kind of ‘roll their own’ as they need JS behaviour such as modals or dropdowns.

I have raised a similar discussion on Tailwind. HeadlessUI & Stimulus JS · Discussion #7546 · tailwindlabs/tailwindcss · GitHub

2

We are using Tailwind and Stimulus pretty extensively together and more or less just rolling our own components based off the tailwindui.com styles. It’s pretty straightforward once you learn how to ease in and ease out different parts of the UI.

3

that makes sense, what about more complex UI elements such as modals (managing focus, accessibility) or date pickers (with localization).

4

I’m using github elements. They are very accessible and are not styled.

5

The amount of JavaScript needed is pretty small for modals or dropdown. A dropdown example that we’re using in production that attaches to tailwindui.com in 20 lines of code.

import { Controller } from "@hotwired/stimulus"
import { enter, leave } from 'el-transition';

export default class extends Controller {
  static targets = ["menu"]
  static values = { open: Boolean }

  toggle() {
    this.openValue = !this.openValue
  }

  hide(event) {
    if (this.element.contains(event.target) === false && this.openValue) {
      this.openValue = false
    }
  }

  openValueChanged() {
    this.openValue ? enter(this.menuTarget) : leave(this.menuTarget)
  }
}
6

Thanks all, this is helpful.