Luca knew the heart of modern Drupal theming wasn’t just about Twig templates—it was about component-driven design . He closed the monolithic styles.css file. No one should write global CSS in 2026.
<div class="node node--type-article node--view-mode-teaser"> <h2> label </h2> <div class="content"> content </div> </div> Luca shook his head. Too much logic. Too many global classes. He rewrote it:
On Sunday night, Luca ran the final build. He used Drupal 10’s new auto-setup CLI to spin up a test environment, ran phpunit on his custom theme settings, and pushed the changes. luca lusso modernizing drupal 10 theme development
He opened his terminal and ran the familiar commands:
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; ); ); Luca knew the heart of modern Drupal theming
Monday morning, the editors logged in. The admin UI was untouched. But the front end? It felt like a new website. The designers could now edit a single .css file inside a component folder without fear of breaking the header. The developers thanked him for removing jQuery.
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/ . He rewrote it: On Sunday night, Luca ran the final build
He replaced it with a modern, lean setup. He wrote a custom theme.libraries.yml that imported a single ES6 entry point: