Use daisyUI with Stimulus

How to install and use daisyUI with Stimulus

If you're using Rails, follow the Rails install guide.

1. Install

Initialize a new Node project in the current directory using npm init -y if it's not a Node project already.

Install Tailwind CSS CLI and daisyUI

npm install tailwindcss@latest @tailwindcss/cli@latest daisyui@latest

2. Add Tailwind CSS and daisyUI

Add Tailwind CSS and daisyUI to your CSS file.

@import "tailwindcss";
@plugin "daisyui";

3. Build CSS

Add a script to your package.json to build the CSS.

{
  "scripts": {
    "build:css": "npx @tailwindcss/cli -i app.css -o public/output.css"
  },
}

Run the script to build the CSS file

npm run build:css

This command creates a public/output.css file with the compiled CSS. You can link this file to your HTML file.

<link href="./output.css" rel="stylesheet">

4. Add Stimulus

Load Stimulus from CDN and start the application.

<script type="module">
  import { Application } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js"
  window.Stimulus = Application.start()
</script>

Or if you're using a bundler:

1. Install it with npm i @hotwired/stimulus
2. Import it like import { Application } from "@hotwired/stimulus"

Now you can use daisyUI class names!

<button class="btn btn-primary">Hello daisyUI!</button>