StimulusJS Tailwindcss - Installation

Find out how to install Stimulus Tailwind Component to your project and use the most out of it!

Setup

Run the below to install dependencies and stimulus-tailwind-components to your project.

Installing dependencies

Be sure to add @hotwired/stimulus and tailwindcss to your dependencies to start before installing stimulus-tailwind-components

yarn add @hotwired/stimulus@latest tailwindcss@latest

npm install @hotwired/stimulus@latest tailwindcss@latest

pnpm add @hotwired/stimulus@latest tailwindcss@latest

Tailwindcss is not a hard dependecy but is the recommeneded styling library.

Adding to Project

yarn add stimulus-tailwind-components@latest

npm install stimulus-tailwind-components@latest

pnpm add stimulus-tailwind-components@latest

Basic Usage

Prerequisite

You'll want to initialize StimulusJS and then you can import all the Tailwind components.

Common JS projects

// ../application.js
import { Application } from "@hotwired/stimulus"
// Import and register all Tailwind Components
import { Modal, Notification, Switch, Theme } from "stimulus-tailwind-components"

const application = Application.start()

application.register("notification", Notification)
application.register("theme", Theme)
application.register("switch", Switch)
application.register("modal", Modal)

Jekyll projects

This project would be you downloading the minified js file that outputs for usage

<!-- ./_layouts/default.html -->

<head>
  <script>
    window.esmsInitOptions = { enable: ["css-modules", "json-modules"] }
  </script>
  <script async src="https://unpkg.com/es-module-shims/dist/es-module-shims.js"></script>

  <script type="importmap">
    {
      "imports": {
        "@hotwired/stimulus": "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js",
        "stimulus-tailwind-components": "https://unpkg.com/stimulus-tailwind-components/dist/stimulus-tailwind-components.min.js"
      }
    }
  </script>

  <script type="module">
    import { Application } from "@hotwired/stimulus"
    import { Modal, Notification, Switch, Theme } from "stimulus-tailwind-components"

    ;(() => {
      const application = Application.start()
      application.register("theme", Theme)
      application.register("notification", Notification)
      application.register("switch", Switch)
      application.register("modal", Modal)
    })()
  </script>
</head>

Rails Application (v7+)

// ./app/javascript/controllers/application.js
import { Application } from "@hotwired/stimulus"
// Import and register all Tailwind Components
import { Modal, Notification, Switch, Theme } from "stimulus-tailwind-components"

const application = Application.start()

application.register("notification", Notification)
application.register("theme", Theme)
application.register("switch", Switch)
application.register("modal", Modal)
// Configure Stimulus development experience
application.debug = false
window.Stimulus = application
export { application }