TailwindCSS4 Drupal

A Vite, TailwindCSS 4 & Drupal theme

Installation

This project runs in a Docker Compose environment (Traefik, PHP/Apache, MariaDB, Node) to serve your Drupal 11 site with TailwindCSS 4.

# Start the containers for site tailwind.localhost
make start
# Install Drupal 11
make composer install
# Install Node.js dependencies
make package
# Create Certificat SSL local, read to README.md
# Install "mkcert"
make certs
# Install Vite Build
make 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
make drush cr

# Install Vite Dev
make dev

Go to https://tailwind.localhost/

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) ✗ make dev

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

> tailwind@0.0.1 dev
> vite

VITE v8.1.3 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