TailwindCSS Stimulus Components Gem not working in new rails 7 application

Attempting to use the following gem in a new rails application: https://github.com/excid3/tailwindcss-stimulus-components

Main reason is that the new supported tailwind gem that you can install directly with a new build does not seem to allow for plugins: @tailwindcss/forms for example.

Added the following:

app/javascript/controllers/application.js

Tried both the default: import { Application } from "@hotwired/stimulus" and the below:

// Start StimulusJS
import { Application } from "stimulus"

const application = Application.start();

// Import and register all TailwindCSS Components
import { Alert, Autosave, Dropdown, Modal, Tabs, Popover, Toggle, Slideover } from "tailwindcss-stimulus-components"
application.register('alert', Alert)
application.register('autosave', Autosave)
application.register('dropdown', Dropdown)
application.register('modal', Modal)
application.register('tabs', Tabs)
application.register('popover', Popover)
application.register('toggle', Toggle)
application.register('slideover', Slideover)

Added a controller: rails g controller static home

Changed routes to Static#home

Added the alert example to app/views/static/home.html.erb

<div class="fixed inset-x-0 top-0 flex items-end justify-right px-4 py-6 sm:p-6 justify-end z-30 pointer-events-none">
  <div data-controller="alert" class="max-w-sm w-full shadow-lg rounded px-4 py-3 rounded relative bg-green-400 border-l-4 border-green-700 text-white pointer-events-auto">
    <div class="p-2">
      <div class="flex items-start">
        <div class="ml-3 w-0 flex-1 pt-0.5">
          <p class="text-sm leading-5 font-medium">
            Stimulus is the JS of the future!
          </p>
        </div>
        <div class="ml-4 flex-shrink-0 flex">
          <button data-action="alert#close" class="inline-flex text-white focus:outline-none focus:text-gray-300 transition ease-in-out duration-150">
            <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

I am up for using something other than tailwind-stimulus-components. I mainly would like to use the tailwind ui components from this: https://tailwindui.com/ in a new rails application

Thanks.

Not sure if you solved this but this works to get it up and running:
https://github.com/excid3/tailwindcss-stimulus-components/issues/153

My issue is that the alerts do not animate when they trigger. Any ideas on that? I am using the referenced code on the github page to render the alert.

IIRC I put the alert in the controller, for example, on create.