daisyUI v5.6 is now available!
Ember
Ember.js is a productive JavaScript framework for building modern web applications.

Install daisyUI for Ember

How to install Tailwind CSS and daisyUI in a Ember project

1. Create a new Ember project

Create a new Ember project using vite in the current directory

Terminal
npx ember-cli@latest init --blueprint @ember/app-blueprint

2. Install Tailwind CSS and daisyUI

Terminal
npm install tailwindcss@latest @tailwindcss/vite@latest daisyui@latest

Add Tailwind CSS to Vite config

vite.config.mjs
  import { defineConfig } from 'vite';
  import { extensions, classicEmberSupport, ember } from '@embroider/vite';
  import { babel } from '@rollup/plugin-babel';
+ import tailwindcss from '@tailwindcss/vite';

  export default defineConfig({
    plugins: [
+     tailwindcss(),
      classicEmberSupport(),
      ember(),
      // extra plugins here
      babel({
        babelHelpers: 'runtime',
        extensions,
      }),
    ],
  });

Put Tailwind CSS and daisyUI in your CSS file (and remove old styles)

app/styles/app.css
@import "tailwindcss";
@plugin "daisyui";

Import the CSS file in your index.html

index.html
<head>
+  <script type="module">
+    import "./app/styles.css";
+  </script>
  <!-- the rest -->
</head>

Now you can use daisyUI class names!

Do you have a question? Ask on GitHub or Discord server
Do you like daisyUI? Post about it!
Support daisyUI's development: Open Collective
BLUEPRINT

Official daisyUI
Code Generator
MCP server

Generate daisyUI code with any LLM

More details
Please upgrade your browser