A Template for Lit + Tailwind + Daisy + Bun

A starter template for a web app built with

Lit Tailwind Daisy UI Bun

Contents

• Using this Repo
• Running the App
• Building a Distribution
• Running the Distribution Locally
• Features
• Screenshots
• How it Works

Using this Repo

bun create github.com/dazraf/lit-tailwind-daisy-bun <your-directory-name>
cd <your-directory-name>

Running the App

bun dev

Building a Distribution

Useful for testing as well as running the Lighthouse report.

bun run build

Running the Distribution Locally

npx http-server dist -p 5173 -g --proxy http://localhost:5173\?

Features

• Nav Toolbar
• Theme Selector
• Routing for three pages using the Lit Router: /, /contact and /about.
• Mixin class AppStyledElement.ts which gives you all the power of Tailwind and Daisy for Lit components
• Bootstrap icons wrapped as a web component
• Breadcrumbs
• 100% Lighthouse Score

Screenshots

How it Works

Vite Setup

The vite app was created with bun create vite my-vue-app --template lit-ts. Then I added vite-plugin-compression and vite-plugin-sitemap to meet best practices as recommended by Lighthouse.

Packages

The app uses the packages for Tailwind (including @tailwind/typography postcss and autoprefixer), Daisy, Lit Router, Bootstrap Icons and the URLPatter polyfill.

Tailwind Configuration

I've configured Tailwind to include Tailwind's typography package and Daisy UI. As the app demonstrates the use of Daisy's multiple themes, I've also configured the selected list in the config. Unfortunatley, this list has to be replicated in the app itself in ThemeSelector.ts.

How Tailwind is used in the App

Tailwind is included in the application's index.css. The build system will use Tailwind to generate a minimal set of CSS definitions as used by the app. The app includes this file in AppStyledElement.ts

import inlineCss from "../index.css?inline";
export const appStyle = unsafeCSS(inlineCss);

This will ensure that we only load the CSS file once to be used by Lit elements. Typically the compiler will error when importing a CSS file and when using the ?inline parameter, but this is easily dealt with global.d.ts:

declare module "*.css";
declare module "*.css?inline";

The AppStyledElement mixin is then used when creating a new Lit component e.g.

@customElement("app-breadcrumbs")
export class Breadcrumbs extends AppStyledElement(LitElement) {
  //...
}

Navigation and the Lit Router

The Lit Router is a great lightweight library. In navigation.ts I've hooked the browser's globalThis.history.pushState to keep it updated.

Theme Selection

I've decided to use Daisy's Theme Controller, wrapping it in a Lit component and altering some of the UX behaviour. I think this one could do with more work to allow for full accesibility via only the keyboard.