Compile your CSS

The helpers produce classes; your application builds and serves the CSS. This example uses Tailwind's CLI with DaisyUI and avoids a separate JavaScript bundler.

Install the build tools

From the application root:

npm install -D tailwindcss@4 @tailwindcss/cli@4 daisyui@5

Create src/css/app.css:

@import "tailwindcss";
@plugin "daisyui" {
  themes: light --default, dark --prefersdark, cupcake;
}
@source "../../templates";
@source "../../vendor/dereuromark/cakephp-tailwind-ui";

Paths are relative to this stylesheet. Tailwind ignores dependencies listed in .gitignore during automatic detection, so the explicit vendor source is needed for classes generated by the plugin's helpers and presets. Scan any additional directories containing your custom class-map values as well.

Compile the stylesheet:

npx @tailwindcss/cli -i src/css/app.css -o webroot/css/app.css --minify

Run the command again when templates, presets, or class maps change. During development, append --watch to rebuild after changes.

Load the stylesheet

In a template rendered with the plugin's layout:

<?= $this->Html->css('app', ['block' => true]) ?>

The layout outputs that block in <head>. An application layout can instead call $this->Html->css('app') directly inside its head. Remove the development CDN assets once the local stylesheet is loaded.

If you emit classes dynamically from database values, add the allowed complete class names to a scanned source file or use Tailwind's documented explicit source rules. Tailwind cannot infer classes assembled from string fragments.

See Tailwind's source detection documentation and the official DaisyUI installation guide. For KTUI's CSS and JavaScript, see Presets.

Select a theme

The bundled DaisyUI layout reads TailwindUi.theme and emits it as data-theme on the HTML element. The default is light. Set the theme before rendering:

\Cake\Core\Configure::write('TailwindUi.theme', 'cupcake');

Include that theme in the compiled CSS, as the example above does. DaisyUI's default plugin configuration includes only light and dark; removing the former external themes.css request means additional themes must be compiled explicitly. See DaisyUI's theme configuration.

For KTUI, the same setting selects its dark class only when the value is dark. Other theme names do not select a KTUI theme.