tailwindcss-stimulus-components

The components are unstyled by default; they do not require specific CSS classes to function. Instead, they rely on correctly defined data- attributes to trigger actions and locate targets.

Note that some components, such as the Modal, require specific structural styles (like separate container and background elements) to ensure proper browser behavior and layout control.

Apply the autosave controller to a form and define a target for the form itself. To trigger saves, add an action (like keyup->autosave#save) to input fields. The component uses form.requestSubmit() to ensure Turbo events are fired. You should listen for turbo:submit-end and turbo:fetch-request-error to handle success and error states respectively.

<%= form_with(model: post, data: { controller: "autosave", autosave_target: "form", action: "turbo:submit-end->autosave#success turbo:fetch-request-error->autosave#error" }) do |form| %>
  <div class="form-group">
    <%= form.label :title %>
    <%= form.text_field :title, class: 'form-control', data: { action: "keyup->autosave#save" } %>
  </div>

  <div data-autosave-target="status"></div>

  <%= form.submit %>
<% end %>

To use the Slideover component, import the Slideover class from tailwindcss-stimulus-components and register it with your Stimulus application using the identifier 'slideover'.

import { Slideover } from "tailwindcss-stimulus-components"
application.register('slideover', Slideover)

To use the Toggle component, import the Toggle class from tailwindcss-stimulus-components and register it with your Stimulus application using the identifier 'toggle'.

import { Toggle } from "tailwindcss-stimulus-components"
application.register('toggle', Toggle)

To use the Autosave component, you must first register it with your Stimulus application. This component provides automatic debounced form submission for autosave functionality, with a default debounce delay of 1000ms.

import { Autosave } from "tailwindcss-stimulus-components"
application.register('autosave', Autosave)

To use the Alert component, you must register the Alert class with your Stimulus application using the alert identifier.

import { Alert } from "tailwindcss-stimulus-components"
application.register('alert', Alert)

To use the Modal component, register it with your Stimulus application and use the modal controller on a wrapper element. The component requires a <dialog> element marked with the data-modal-target="dialog" attribute. You can control the modal using the modal#open and modal#close actions.

import { Modal } from "tailwindcss-stimulus-components"
application.register('modal', Modal)

<div data-controller="modal">
  <dialog data-modal-target="dialog" class="p-8 rounded-lg backdrop:bg-black/80 m-auto">
    <p>This modal dialog has a groovy backdrop!</p>
    <button autofocus data-action="modal#close" class="px-2.5 py-1 bg-blue-500 text-white text-sm rounded">Close</button>
  </dialog>

  <button data-action="modal#open" class="bg-blue-500 hover:bg-blue-700 text-white text-sm font-bold py-1 px-2.5 rounded">Open modal</button>
</div>

To use the Popover component, import the Popover class from tailwindcss-stimulus-components and register it with your Stimulus application.

import { Popover } from "tailwindcss-stimulus-components"
application.register('popover', Popover)