Canvas Studio Tailwind

Canvas Studio Tailwind is the Tailwind CSS framework bundle for Canvas Studio, the design-system layer that turns Drupal Canvas into a complete, Drupal-native page editor. It provides a ready-made component library plus the token-to-utility mappings, so site builders can compose and style professional Canvas pages with Tailwind and no bespoke CSS.

Install it alongside Canvas Studio to get a working set of components you can place in the Drupal Canvas editor and style through Canvas Studio's visual panel, all rendered as Tailwind utility classes. Your content stays framework-neutral; this bundle is the layer that renders it as Tailwind.

Where it fits

Canvas Studio splits a design-system editor into four layers. This project supplies the two framework-specific ones:

• L2, output mappings. The token-to-Tailwind-utility presets (data/default_mappings.yml), discovered automatically by Canvas Studio.
• L4, component library. The SDC components that render the markup, authored with Tailwind.

The framework-agnostic engine, the neutral tokens, and the editor skin come from Canvas Studio (the base). Because content stores neutral tokens, the same pages could render through a different framework bundle without being rewritten.

This project supplies L2 (token-to-class mappings) and L4 (the component library). The base supplies L1 tokens and the L3 editor skin.

Features

• Ready-made component library. SDC components for sections and groups (layout containers), cards, heroes, navbar, accordion, carousel, buttons and links, badges, media, headings and text, and more.
• Tailwind output. Canvas Studio's style controls emit Tailwind utility classes through this bundle's mapping preset, so there is no bespoke CSS per page.
• Clickable containers. Make a section, group, or card a link, using an accessible stretched-link that keeps nested buttons and links working.
• Overridable mappings. The default token-to-class table is discovered, and site administrators can override individual classes from Canvas Studio's settings.
• Responsive and right-to-left ready. Per-breakpoint utilities driven by the prop panel, and logical CSS properties (inline-start and inline-end spacing, logical insets) for correct right-to-left rendering.

Recent improvements (1.0.0-beta1)

• All free-text link properties are passed through a URL sanitizer across the link-bearing components.
• Stretched-link overlays always carry an accessible name, and the hero-blog byline is translatable.
• A prop-panel audit fixed a class of bug where a control's value could be overridden by a component-baked class: transition timing, border radius, box shadow, and position offsets now behave as set. See the CHANGELOG for details and the upgrade note.

Getting started

Requirements: Drupal core ^11, Canvas Studio (canvas_studio:canvas_studio_props), PHP 8.3+, and a Tailwind-based theme with its own Tailwind build.

1. Install and enable. Enabling this project pulls in Canvas Studio; the components then appear in the Drupal Canvas editor and are styled from the Canvas Studio Settings panel.

composer require drupal/canvas_studio drupal/canvas_studio_tailwind
drush en canvas_studio canvas_studio_tailwind

2. Point your theme's Tailwind build at this bundle. Canvas Studio's controls emit Tailwind utility classes that live in this module's component templates and mapping data, so your theme's Tailwind build must scan them. Add these to your theme's main CSS entry, immediately after @import "tailwindcss";:

@source "../../../../modules/contrib/canvas_studio_tailwind/modules/canvas_studio_components/components/**/*.{twig,js,html}";
@source "../../../../modules/contrib/canvas_studio_tailwind/data/**/*.yml";

Use explicit globs, not a bare directory. A bare @source ".../components"; respects your project's .gitignore, and since Composer-managed modules live under the git-ignored web/modules/contrib, the files would be skipped and the utility classes never generated (broken responsive layout, missing styles). The /**/*.{twig,...} globs force the scan. Adjust the relative depth (../../../../) to where your theme's entry CSS sits.

3. Rebuild the theme's CSS. Run your theme's Tailwind build (for example npm run build) so every class is generated, and commit the compiled CSS — production does not rebuild.

cd web/themes/custom/<your_theme> && npm ci && npm run build

Rebuild whenever you add or change components. If a class assembled dynamically in a component is missing, add it to a Tailwind safelist in your theme (@source inline("…")).

Theme integration

This bundle ships with a reference theme integration that provides a Tailwind build pipeline and an icon set, so it works out of the box. To use the bundle with your own Tailwind theme, point your theme's Tailwind @source configuration at this bundle's components/ and data/ directories and rebuild your theme's CSS, so every utility class the mappings emit is generated. The compiled CSS is a committed build artifact; production does not rebuild, so commit the regenerated file.

Learn more

See Canvas Studio for the full architecture, the design-system editor, and the deploy and versioning tooling.