TailwindCSS4 Drupal

A Vite, TailwindCSS 4 & Drupal theme

Installation

Lando.dev is a local development environment tool that allows you to run your Drupal site in a containerized environment. This guide will help you set up Lando for your Drupal 11 site with TailwindCSS 4.

# Install Lando to site tailwind.lndo.site
lando start
# Install Drupal 11
lando composer install
# Install Node.js dependencies
lando package
# Install Vite Build
lando build
# Install Vite Dev
lando dev

Configuration Development mode

Enable Twig debug mode

Twig debugging can be enabled via Admin > Configure > Development settings (/admin/config/development/settings).

Enable HMR (Hot Module Replacement) for Vite

$settings['hot_module_replacement'] = TRUE;