How It Works: daisyUI (Tailwind Component Library & Theming)
What it is
daisyUI is a component library on top of Tailwind CSS. It adds prebuilt class names (e.g., `btn`, `card`, `navbar`) and a theme system so you can build UIs quickly without hand‑rolling every utility string.
How it works
- Extends Tailwind via a plugin that registers component classes and CSS variables.
- Themes are design‑token bundles applied via `data-theme` on `<html>` or a wrapper.
- Because it compiles through Tailwind, unused styles can still be purged from production builds.
Install & Setup (SvelteKit example)
npm i -D tailwindcss postcss autoprefixer daisyui
npx tailwindcss init -p
# tailwind.config.cjs
module.exports = {
content: ['./src/**/*.{svelte,html,js,ts}'],
theme: { extend: {} },
plugins: [require('daisyui')],
daisyui: {
themes: ['light','dark','cupcake'] // or true for all built-ins
}
}
# src/app.css
@tailwind base;
@tailwind components;
@tailwind utilities;
Basic usage
<!-- Buttons, cards, alerts -->
<button class="btn btn-primary">Save</button>
<div class="card w-96 bg-base-100 shadow">
<div class="card-body">
<h2 class="card-title">Hello</h2>
<p>Quick start card</p>
<div class="card-actions justify-end">
<button class="btn btn-secondary">OK</button>
</div>
</div>
</div>
<div class="alert alert-info">Heads up!</div>
Theming & Dark Mode
<!-- Toggle theme by setting data-theme -->
<html data-theme="dark">...</html>
<!-- Or toggle in app code -->
<script>
const next = document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark';
document.documentElement.setAttribute('data-theme', next);
</script>
Customization
- Start with a built‑in theme, then override CSS variables (colors, radius, etc.).
- Keep Tailwind tokens (spacing/typography) as your single source of truth; daisyUI reads them.
:root {
--rounded-btn: 0.75rem;
--btn-text-case: none;
}
Accessibility
- Many components ship with sensible defaults (focusable controls, contrast). Always verify with your content.
- Use semantic HTML (buttons for actions, anchors for links) and ARIA sparingly.
- Check color contrast after customizing themes.
Advantages
- **Speed**: production‑ready components without rebuilding primitives.
- **Theming**: easy light/dark/system themes via variables.
- **Tailwind‑native**: still compose with utilities; purge works; minimal runtime.
Disadvantages
- **Abstraction**: less granular control than hand‑tuned utilities on complex components.
- **Design sameness**: many sites look alike unless you customize tokens.
- **Upgrade drift**: breaking changes in class semantics can surprise you if pinned loosely.
Competitors / Alternatives
- **Flowbite** — Tailwind components with more marketing‑site patterns.
- **shadcn/ui** — Headless + Radix primitives styled with Tailwind; maximum control, more assembly.
- **Headless UI** — Unstyled, accessible primitives; you bring Tailwind classes.
- **Bootstrap / Material / Mantine** — Full frameworks; opinionated look, heavier overrides.
Performance notes
- Keep `content` globs accurate so unused styles are purged.
- Prefer semantic composition over deep nested components to avoid oversized HTML.
- Tree‑shake icons and heavy third‑party scripts separately.
Best practices
- Build a `ui/` folder for shared composed components (Button, Dialog, Navbar).
- Define a limited palette and radius scale; avoid arbitrary one‑offs.
- Document theme usage and switching rules in your design system.
Taylor Swift
“We never go out of style.”
Comments
Post a Comment