Setting Up a Tailwind CSS Theme for Drupal Canvas

Ivan Zugec’s WebWash tutorial explains how to set up a custom Tailwind CSS theme for Drupal Canvas. The article shows how to generate the base theme using Drush, define regions in the .info.yml file, and configure Tailwind CSS with Vite so that utility classes are compiled into production styles. Templates are written in Twig to support both Canvas pages and standard Drupal pages, and preprocess functions are used to add Tailwind classes to Drupal elements such as menus, branding, and tabs without overriding core templates. The guide also includes practical steps for defining region layouts and assigning blocks in Drupal’s UI during theme setup.

Beyond the basic theme scaffolding, the post describes how to build reusable UI elements, called Single Directory Components, that work with Canvas. Examples include text, heading, hero image, card, and section grid components, each defined with its own metadata and template. The tutorial also points to the WebWash Tailwind Starter Site as a complete example that developers can explore before building their own themes. By following these steps, developers can integrate Tailwind’s utility‑first workflow into Canvas page builds, enabling responsive, modern styling within Drupal’s layout system.