daisyui

daisyUI is a Tailwind CSS plugin that adds a layer of semantic, named component classes — btn, card, modal, navbar, and dozens more — on top of Tailwind’s utility engine. Instead of composing a component from a long string of utility classes every time it’s used, a developer writes one or two class names and gets a fully styled, accessible-by-default element, while still being able to override or extend it with regular Tailwind utilities.

The project ships as a monorepo: the daisyui npm package (pure CSS plus a small JS plugin entry point) is built from component source files under src/components, src/base, and src/themes, and a separate SvelteKit-based docs site consumes the same source to render live examples. A Node build script (build.js) compiles themes, generates chunked CSS output, and produces the color-utility files that ship in the published package.

Theming is a first-class feature rather than an afterthought: daisyUI defines 35+ named themes (light, dark, cupcake, synthwave, and more) using OKLCH color tokens, selectable via a data-theme attribute, a CSS class, or the user’s OS color-scheme preference, with zero JavaScript required at runtime. Components, themes, and utilities can each be included or excluded via plugin options, keeping unused CSS out of the final bundle.

What You Get

• A library of 60+ prebuilt component classes (buttons, cards, modals, navbars, drawers, tables, forms, and more) that compile directly into a Tailwind CSS build.
• 35+ ready-made color themes built on the OKLCH color space, switchable at runtime via a data-theme attribute or CSS class with no JavaScript.
• A configurable Tailwind plugin API (include/exclude/prefix options) so unused components, utilities, or themes can be stripped from the final CSS bundle.
• Zero-JavaScript component behavior — interactive states (checkboxes, radios, :has() selectors) drive things like drawers and modals using pure CSS.
• Framework-agnostic output — plain CSS classes that work identically in React, Vue, Svelte, Next.js, Nuxt, Astro, Laravel Blade, or static HTML.

Common Use Cases

• Bootstrapping a new product’s UI quickly without hand-rolling a design system or pulling in a heavy component framework.
• Adding consistent, themeable styling to a Tailwind CSS project across multiple frontend frameworks in a multi-app or micro-frontend setup.
• Building admin dashboards, marketing sites, and internal tools where a small team needs a complete component set without maintaining custom CSS.
• Providing a base design system for design-conscious static sites (Astro, Eleventy) or server-rendered apps (Laravel, Rails) that already use Tailwind.

Under The Hood

Architecture

The package is generated, not hand-typed, from a source tree of small single-responsibility CSS files under src/components, src/base, src/themes, and src/utilities; build.js orchestrates a pipeline of pure functions in functions/ (generateThemes, generateThemeFiles, generateColorRules, generateImports, generateChunks, packCss, minify) that compile theme tokens, extract per-component classes, and emit the final daisyui.css/chunks.css/imports.js artifacts consumed by index.js. The runtime entry point itself is a thin Tailwind plugin (functions/plugin.js, pluginOptionsHandler.js) that iterates over generated base/components/utilities maps and calls Tailwind’s addBase/addComponents/addUtilities hooks, applying an include/exclude filter and an optional class prefix — a clear separation between the offline build-time generation layer and the small runtime layer that plugs into a consumer’s Tailwind config.

Tech Stack

Built and tested with Bun (bun run, bun:test) rather than Node’s own toolchain, targeting Tailwind CSS 4.x as a peer integration (@tailwindcss/cli, @tailwindcss/vite as devDependencies) with lightningcss and postcss/postcss-js/postcss-selector-parser used for CSS transformation during the build. The published package has no runtime dependencies of its own — it ships pure CSS plus a small ESM plugin file — while the sibling packages/docs app is a SvelteKit site that imports the same source to render live examples, and packages/playground supports interactive manual testing.

Code Quality

Tests are colocated with the build functions as *.test.js files (34 test files across functions/) using Bun’s built-in test runner, each function tested in isolation with temp-directory fixtures (see createTempDirTracker/runInCwd helpers) rather than mocks — a lightweight but genuine unit-test layer over the CSS-generation pipeline. Linting runs via oxlint, formatting via Prettier with a Tailwind-class-sorting plugin, and GitHub Actions workflows run tests and lint on every change plus an automated release pipeline (release-new-version.yml); TypeScript typings are hand-maintained for the small number of exposed JS APIs (themeOrder.d.ts, variables.d.ts) rather than the whole codebase, consistent with a mostly-CSS package.

What Makes It Unique

daisyUI’s distinguishing choice is compiling semantic component classes as a genuine Tailwind plugin rather than shipping a separate compiled stylesheet or JS component library — consumers keep Tailwind’s utility-class override model and @apply-based customization while getting named classes for common UI patterns, and its theme system is unusually deep for a CSS-only library, supporting dozens of complete themes plus automatic dark-mode selection driven entirely by CSS :has()/attribute selectors with no client-side JavaScript.