Ask A Question

Notifications

You’re not receiving notifications from this thread.

TailwindCSS Stimulus Components Gem not working in new rails 7 application

Bryan Beshore asked in Gems / Libraries

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.

Reply

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.

Reply

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

Reply
Join the discussion
Create an account Log in

Want to stay up-to-date with Ruby on Rails?

Join 78,890+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more.

    © 2023 GoRails, LLC. All rights reserved.