PageWeave/Design
llms.txt Contribute
Menu
Styles Themes Components Skills Prompts Guides Collections Changelog About

Guides / Design / daisyUI Theming Masterclass

6 Design daisyuithemecomponentstailwind .md

daisyUI Theming Masterclass

Getting the most from daisyUI 5 on PageWeave — component selection, overrides, and the utility bridge.

PageWeave ships Tailwind v4 + daisyUI 5 pre-wired. Mastery is knowing when to lean on components, when to bridge with utilities, and when to write custom CSS (rarely).

Component selection protocol

Before writing any markup:

  1. Name the function (not the look): "group content for scanning" → card/list; "single choice visible at once" → collapse/radio.
  2. Check daisyUI's catalog first — accordion, alert, avatar, badge, breadcrumbs, btn, card, chat, checkbox, collapse, countdown, diff, divider, dock, drawer, dropdown, fieldset, file-input, filter, footer, hero, indicator, input, join, kbd, label, link, list, loading, mask, menu, mockup-browser, mockup-code, modal, navbar, pagination, progress, radial-progress, radio, range, rating, select, skeleton, stat, steps, swap, table, tabs, textarea, theme-controller, timeline, toast, toggle, tooltip, tree.
  3. Compose: component class + part classes + modifier classes (color/size/style).
  4. Only then reach for utilities to adjust.

The override ladder (in order)

  1. Utility class: btn px-10 — padding tweak.
  2. Important utility (last resort): btn bg-red-500! — fights specificity; rare.
  3. Component variable: many components expose CSS vars (radial-progress --value, countdown --digits).
  4. @utility directive for global reshaping:
@utility btn { @apply rounded-full; }

Semantic color discipline

Utilities read theme variables: bg-primary, text-base-content/60, border-base-300. Opacity modifiers give the dim-scale free. Never dark: variants — the theme IS the mode on PageWeave (data-theme pinned, not OS-switched).

Radius & size tokens

rounded-box, rounded-field, rounded-selector map to theme radius tokens — use them instead of hardcoded radii so components follow the theme's register.

What NOT to do

  • Don't add Tailwind/daisyUI CDN links — they're already included.
  • Don't put bg-base-100 text-base-content on body unless overriding a theme mismatch.
  • Don't mix icon sets; inline SVG or glyph characters.
  • Don't rebuild what join, swap, filter, or mockup-browser already do.

Testing matrix

Every themed build should screenshot: buttons (all variants), form controls, badges/alerts, tables, modal/dialog, and the markdown prose view — these exercise every token family.