Install daisyUI for Lit
How to install Tailwind CSS and daisyUI in a Lit + Vite project
1. Create a new Vite project
Create a new Vite project in the current directory
Terminal
npm create vite@latest ./ -- --template lit2. Install Tailwind CSS and daisyUI
Terminal
npm install tailwindcss@latest @tailwindcss/vite@latest daisyui@latestAdd Tailwind CSS to Vite config
vite.config.js
import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({
plugins: [
tailwindcss()
],
});Put Tailwind CSS and daisyUI in your CSS file (and remove old styles)
src/index.css
@import "tailwindcss";
@plugin "daisyui";3. Make the CSS available for shadow DOM elements
Put this code in src/my-element.js file and remove the old code
src/my-element.js
import { LitElement, html } from "lit";
import { unsafeCSS } from "lit";
import globalStyles from "./index.css?inline";
export class MyElement extends LitElement {
static styles = [unsafeCSS(globalStyles)];
render() {
return html`<button class="btn">daisyUI button</button> `;
}
}
window.customElements.define("my-element", MyElement);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