This Drupal site starter kit demonstrates how to set up a basic Tailwind CSS theme with Drupal's Single Directory Components (SDC) architecture.
Watch the video and read the full tutorial on how to build this site: Tailwind CSS Theme Setup for Drupal Canvas
Want to level up your Drupal skills? Join the WebWash Premium community to access in-depth tutorials, exclusive content, and hands-on projects that help you build professional Drupal sites.
Stay connected with WebWash for the latest Drupal tutorials, tips, and updates on modern web development.
WebWash: 💻 Website · ✉️ Newsletter · 🎥 YouTube · 💼 LinkedIn · ✖️ X/Twitter · 🦋 Bluesky · 📱 TikTok
Ivan Zugec: 🎥 YouTube · 💼 LinkedIn · ✖️ X/Twitter · 🦋 Bluesky · 📱 TikTok
- DDEV - Make sure you have DDEV installed and set up on your machine
- Webwash Tailwind Theme - A modern Drupal theme built with Tailwind CSS v4
- Canvas Module Integration - Pre-configured Single Directory Components
- Recipe-based Installation - Quick site setup using Drupal recipes
Get up and running in just a few commands:
# Clone the repository
git clone git@github.com:WebWash/ww-tailwind-site.git
# Navigate to the project directory
cd ww-tailwind-site
# Start the DDEV environment
ddev start
# Install Composer dependencies
ddev composer install
# Install the site using the recipe
ddev drush site:install --yes ../recipes/ww_tailwind_site
# Launch the site in your browser
ddev launch
# To log in as admin, generate a one-time login link
ddev drush uliThis project uses a Drupal recipe for easy installation and configuration. The recipe includes all necessary configuration, content types, and theme setup.
To install this site using the included recipe, see the installation instructions in:
For detailed information about the Webwash Tailwind theme, including setup instructions, component usage, and development workflow:
- Drupal 11
- Tailwind CSS v4
- Vite (build tool)
- Single Directory Components (SDC)
- Node.js v22.14.0