Canvas Tailwind

Canvas Tailwind gives a site one Tailwind build shared by its theme and its Drupal Canvas code components: one set of design tokens, one stylesheet, one preflight.

The problem

Canvas compiles Tailwind for code components in the browser. A Tailwind theme compiles its own on the command line. The two builds know nothing about each other, so you get two copies of preflight competing, tokens defined in two places that drift apart, and utility classes used only inside a code component that never make it into the stylesheet at all.

What it does

Templates and code components are scanned together, against one configuration, into one stylesheet that serves both. Tokens are declared once, in the theme's @theme block, and apply everywhere — including Canvas' live preview.

Usage

Enable the module, install its front-end dependencies, then build from your theme's directory:

npx canvas-tailwind            # build
npx canvas-tailwind --watch    # rebuild on changes
npx canvas-tailwind --check    # CI: fail if the built CSS is stale

Common Tailwind v4 entrypoints are detected automatically; a theme can name its own entry point in the theme's .info.yml:

canvas_tailwind:
  entry: css/styles.css