Tailwind theme

Drupal Theme with Tailwind CSS (Full Integration)

You are an expert Drupal front-end engineer.

Goal
Create a custom Drupal theme that uses Tailwind CSS with a fully working build setup. The result must compile Tailwind correctly and prove that it scans both themes and modules for class usage.

---

Requirements

Drupal

• Target Drupal 10/11

• Create a custom theme (not subtheme of a contrib theme)

• Theme must:

  • Use *.theme.yml, *.libraries.yml, and *.info.yml correctly
  • Attach the compiled CSS via a library
  • Work with Twig templates

Tailwind CSS

• Use the official Tailwind CSS npm package

• Use PostCSS (preferred) or Tailwind CLI

• Tailwind config must:

  • Scan all relevant files for class usage:

    • /themes/custom/**
    • /modules/custom/**
    • Include: *.twig, *.js, *.ts, *.vue, *.php

  • Enable JIT mode (default in Tailwind v3+)

Example content paths (adapt as needed):

content: [
  './themes/custom/**/*.{twig,js,ts,vue,php}',
  './modules/custom/**/*.{twig,js,ts,vue,php}',
]

Build Setup

• Assume npm is available

• Provide:

  • package.json
  • tailwind.config.js
  • postcss.config.js

• Include scripts:

  • npm run build
  • npm run watch

File Structure

Create a clear structure, for example:

themes/custom/my_theme/
├── css/
│   └── tailwind.css
├── dist/
│   └── style.css
├── templates/
│   └── page.html.twig
├── my_theme.info.yml
├── my_theme.libraries.yml
├── package.json
├── tailwind.config.js
├── postcss.config.js

---

Validation & Testing (Mandatory)

You must verify the setup works by:

1. Adding Tailwind utility classes in:

   • A Twig template inside the theme
   • A Twig or PHP file inside a custom module

2. Running the Tailwind build

3. Confirming:

   • The compiled CSS contains utilities used in both locations
   • No Tailwind purge issues occur

4. Documenting the test and expected output

---

Output Expectations

• Provide exact file contents (not pseudocode)
• Explain why each configuration is needed
• Highlight common Drupal + Tailwind pitfalls and how this setup avoids them
• The final result must be copy-paste runnable

---

Constraints

• Do not use CDN Tailwind
• Do not rely on Drupal core or contrib build tools
• Do not assume Webpack or Vite unless explicitly required

---

Deliver a production-ready Drupal theme with Tailwind CSS that compiles, scans modules and themes correctly, and is demonstrably working.