Canvas Studio Tailwind
This project provides a set of pre-built components for Drupal's Canvas editor, styled using Tailwind CSS and the Byte theme. It allows you to easily add and style content with Tailwind utility classes directly within the Drupal interface.
Canvas Studio Tailwind is the Tailwind CSS / Byte-theme bundle for Canvas Studio: a ready-made component library plus the token-to-utility mappings for building and styling Canvas pages with Tailwind.
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.
Where it fits
Canvas Studio splits a design-system editor into four layers. This project supplies the two framework-specific ones, for Tailwind and the Byte theme:
- L2 · Output mappings — the token → Tailwind utility-class presets (
data/default_mappings.yml), discovered automatically by Canvas Studio. - L4 · Component library — the SDC components that render the markup, authored with Tailwind and the Byte theme's icon / branding.
The framework-agnostic engine, the neutral tokens and the editor skin come from Canvas Studio (the base). Swap this bundle for a Bootstrap or custom one to drive the same editor with a different framework.
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; 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.
Post-Installation
Enable this project (it pulls in Canvas Studio); the components then appear in the Drupal Canvas editor and are styled from the Canvas Studio Settings panel.
Byte theme: this bundle is built to run on the Byte theme — it relies on Byte's Tailwind build pipeline and its icon / branding partials. After enabling it, disable or delete the Canvas components that ship with the Byte theme so they don't duplicate or conflict with the components provided here.
Additional Requirements
- Canvas Studio — the base engine, tokens and editor skin.
- Drupal Canvas (^1.9) and Drupal core ^11.
- The Byte theme — for the Tailwind build and the icon / branding partials the components use.
Recommended modules/libraries
- An editor skin — the default
canvas_studio_skin_defaultfrom Canvas Studio, or any alternative skin.
Similar projects
This is the reference framework bundle for Canvas Studio. A bundle for another CSS framework (e.g. Bootstrap) would be a sibling project providing its own mappings and component library, reusing the same Canvas Studio base.
Supporting this Module
Contributions are welcome — please file issues and open merge requests in the project's issue queue.
Community Documentation
See Canvas Studio's docs/adding-a-framework.md for how a framework bundle like this one is structured, and docs/user-manual.md for using the prop panel.