Introduction
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
or
npm install @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
or
npm install 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 }