Skip to content

daisy CDN default ships components without Tailwind utilities — silently half-styled pages #56

Description

@fsecada01

Found while implementing #52. Not caused by it — the shipped 0.2.0 daisy templates have the same problem — so it is filed separately rather than folded into #53.

The bug

cf_ui_head emits, for CF_UI_THEME = "daisy":

https://cdn.jsdelivr.net/npm/daisyui@4.7.2/dist/full.min.css

That bundle is daisyUI's component layer only. It has no Tailwind utility layer, because daisyUI is a Tailwind plugin — utilities are the host framework's job, and a plugin bundle does not carry them.

Verified against the actual file (2,149,889 bytes):

Selector Present in the bundle
.btn{ yes
.card{ yes
.flex{ no
.w-full{ no
.text-lg{ no
.gap-4{ no
.items-center{ no

The shipped daisy templates depend on exactly those missing utilities — flex appears 9 times across the theme partials, w-full 6, plus text-lg, text-xs, text-sm, gap-2, gap-4, items-center, justify-between.

What a consumer sees

A Django project that sets CF_UI_THEME = "daisy", drops {% cf_ui_head %} into its base template, and follows the quickstart gets partially styled components: buttons and cards look right, and every layout utility is inert. Modal rows do not lay out, navbars do not distribute, form controls do not fill their container. No error, no console warning — just a page that looks broken in a way that reads as "cf-ui is broken."

This is a worse failure mode than a missing stylesheet, because enough of it works that the cause is not obvious.

Why the CDN path exists at all

The documented daisy path is a real Tailwind build — themes.py ships content globs and cf_ui_tailwind_plugin.mjs exists precisely so the consumer's Tailwind build sees cf-ui's templates. That path is correct and unaffected. The CDN default is a convenience for the other four themes, all of which ship self-contained CSS. daisy was given a CDN entry for symmetry with a bundle that cannot provide it.

Options

  1. Point at a bundle that includes utilities. The Tailwind browser build plus daisyUI — e.g. the @tailwindcss/browser script alongside the daisyUI CSS. This works but compiles in the browser, which is a real performance cost and inappropriate for production. Would need to be documented as dev-only.
  2. Refuse to emit a CDN link for daisy, and say why. cf_ui_head renders a comment or raises at startup pointing at docs/daisyui.md. Honest and unmissable, but breaks the "same tag works for every theme" promise.
  3. Keep the link and document the gap loudly. Cheapest, and the worst — the failure is silent and the docs are not where the consumer is looking when it happens.

Option 1 or 2. Whichever is chosen, docs/daisyui.md and the quickstart need to state that daisy is the one theme where CDN mode is not equivalent to a real build.

Acceptance criteria

  • A consumer setting CF_UI_THEME = "daisy" with no Tailwind build either gets working styling or gets an unmissable, actionable signal — never a silently half-styled page.
  • A test pins whichever behaviour is chosen, so a future CDN version bump cannot quietly reintroduce the gap.
  • docs/daisyui.md and the quickstart state the daisy CDN caveat explicitly.
  • The real-Tailwind-build path is unchanged and still documented as the production answer.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions