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
# Create Certificat SSL local, read to README.md
# Install "mkcert"
cd web/themes/custom/tailwind/plugins/https_key && mkcert localhost
# Install Vite Build
lando build

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;

# Clear cache
lando drush cr

# Install Vite Dev
lando dev

Go to https://tailwind.lndo.site/

Inspect the site. In the console, you should see this :

[vite] connecting...
client:912 // [vite] connected.
theme.js:20 // 🚀 Theme Libraries loaded

In your IDE, you should see this when you edit the /src/css files

➜ tailwindcss4-drupal git:(master) ✗ lando dev

> drupal@0.0.1 dev
> npm --prefix ./web/themes/custom/tailwind run dev

> tailwind@0.0.1 dev
> vite

VITE v6.3.2 ready in 1176 ms

➜ Local: https://localhost:3009/
➜ Network: https://172.20.0.3:3009/
➜ Network: https://172.18.0.6:3009/
➜ press h + enter to show help
Files in the public directory are served at the root path.
Instead of /src/css/tailwind.css, use /css/tailwind.css.
6:56:15 PM [vite] (client) hmr update /src/css/tailwind.css
Files in the public directory are served at the root path.
Instead of /src/css/tailwind.css, use /css/tailwind.css.

The page needs to reload with the HMR changes