Install daisyUI for Elysia

How to install Tailwind CSS and daisyUI in a Elysia project

1. Create a new Elysia project

Install Bun, according to theofficial Bun docs

Create a new Elysia project

Terminal

bun create elysia myapp
cd myapp

Install@elysiajs/static

Terminal

bun install @elysiajs/static

2. Install Tailwind CSS and daisyUI

Terminal

bun install tailwindcss@latest @tailwindcss/cli@latest daisyui@latest

Add Tailwind CSS and daisyUI to your CSS file

src/app.css

@import "tailwindcss" source(none);
@source "../public";
@plugin "daisyui";

3. Setup server file

Create a server file atsrc/index.tswith functions to build CSS and watch for changes

src/index.ts

import { Elysia } from "elysia";
import { staticPlugin } from '@elysiajs/static'
import { exec } from 'child_process'
import { watch } from 'fs'

const buildCSS = () =>
  new Promise(resolve =>
    exec('tailwindcss -i ./src/app.css -o ./public/output.css',
      (_error, _stdout, stderr) => {
        console.log(stderr);
        resolve(null);
      })
  );

await buildCSS();

const watcher = watch('./public', { recursive: true },
  async () => {
    await buildCSS();
  }
);

process.on('SIGINT', () => {
  watcher.close();
  process.exit(0);
});

const app = new Elysia()
	.use(
		staticPlugin({
			assets: "public",
      prefix: "",
		}),
	)
	.listen(3000, ({ hostname, port }) => {
		console.log(`Server started http://${hostname}:${port}`);
	});

4. Add a index.html file

Create apublic/index.htmlfile with the following content

public/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/output.css">
  </head>
  <body>
    <button class="btn btn-primary">Hello daisyUI</button>
  </body>
</html>