Tailwind CSS v3.2 data attribute variants + Stimulus

show.html.erb

<div data-controller="toggle">
  <button type="button" data-action="toggle#toggle">Toggle</button>

  <div data-toggle-target="element" data-expanded="false" class="data-[expanded=false]:hidden">
    Here is some toggle-able content!
  </div>
</div>

toggle_controller.js

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["element"]

  toggle(event) {
    event.preventDefault()

    const expanded = this.elementTarget.dataset.expanded
    this.elementTarget.dataset.expanded = expanded == "false" ? "true" : "false"
  }
}

Tailwind CSS introduced data attribute variants in v3.2 to conditionally style things based on data attributes with the new data-* variants.

This is an example of creating a minimal "toggle" component with Stimulus JS that uses the new feature.