Install daisyUI for Electron
How to install Tailwind CSS and daisyUI in a Electron project
1. Create a new Node project
Initialize a new Node project
entry pointshould bemain.js
Terminal
mkdir myapp
cd myapp
npm initRun this command to add the required scripts to your package.json
Terminal
npm pkg set scripts.start="electron ."
npm pkg set scripts.build:css="tailwindcss -i src/input.css -o public/output.css"2. Install Electron, Tailwind CSS, and daisyUI
Terminal
npm install electron tailwindcss@latest @tailwindcss/cli@latest daisyui@latest3. Create files
Create a main.js at the root of your project with the following content
main.js
const { app, BrowserWindow } = require('electron')
const createWindow = () => {
const win = new BrowserWindow()
win.loadFile('src/index.html')
}
app.whenReady().then(() => {
createWindow()
})Create a src/index.html file with the following content
src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<link rel="stylesheet" type="text/css" href="../public/output.css">
</head>
<body>
<button class="btn">Hello daisyUI</button>
</body>
</html>Create a src/input.css file with the following content
src/input.css
@import "tailwindcss";
@plugin "daisyui";3. Build the CSS and run the project
Terminal
npm run build:css
npm startNow 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
