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 }