He replaced it with a modern, lean setup. He wrote a custom theme.libraries.yml that imported a single ES6 entry point:
The real magic came when he integrated Tailwind’s @layer components with Drupal’s SDC (Single Directory Components). He configured postcss.config.js to scan the components/ folder. Now, unused CSS was purged automatically. Build times dropped from 12 seconds to 0.8 seconds.
“This isn’t a theme,” Luca muttered, sipping his espresso. “This is a historical artifact.” luca lusso modernizing drupal 10 theme development
He updated his Drupal Slack status: “Modernizing Drupal themes, one component at a time. #SDC #Drupal10 #NoMoreSpaghettiCSS”
“How?” the client asked, bewildered. He replaced it with a modern, lean setup
npm init -y npm install tailwindcss postcss autoprefixer --save-dev Then, he enabled the new, experimental single_directory_components module that had just landed in Drupal 10.3. Instead of scattering template, CSS, and JS across three different folders, he created a new directory: components/ .
import fetchData from './api.js'; document.querySelectorAll('[data-dynamic-counter]').forEach((el) => once('counter', el).forEach(async (element) => const data = await fetchData('/api/stats'); element.textContent = data.views; ); ); Now, unused CSS was purged automatically
Luca closed his laptop, poured one last espresso, and looked out the window. Another legacy system, modernized. Another team, liberated.