// tailwind.config.js module.exports = { content: [ "./templates/**/*.twig", "./components/**/*.twig", "./components/**/*.js", ], theme: { extend: {}, }, plugins: [], } Use code with caution. Leveraging Vite for Blazing Fast Development
Improved developer experience (DX), faster front-end performance, easier maintenance, and reusability across projects.
This article provides an in-depth guide to modernizing your Drupal 10 theme development workflow, focusing on Twig components, Tailwind CSS integration, and build tools. Table of Contents The Shift: Why Modernize Drupal 10 Themes? Setting Up a Modern Theme Workflow Component-Based Development with Twig CSS Strategy: Tailwind CSS and Utility-First JavaScript and Modern Build Tools (Vite/Webpack) Best Practices for Drupal 10 Themes Conclusion & Download PDF 1. The Shift: Why Modernize Drupal 10 Themes?
Define a responsive image mapping utilizing the picture element and srcset attributes.
Implement Vite or Webpack to compile CSS/JS, handle browser synchronization, and minify assets. Project Structure: modernizing drupal 10 theme development pdf
Are you designing heavily around the admin experience?
Drupal 10 has redefined the standards for frontend development within the Drupal ecosystem. Moving away from legacy approaches, modernization in Drupal 10 focuses on speed, accessibility, component-driven architecture, and decoupling workflows. For developers looking to create high-performance, maintainable themes, adopting modern tools is essential.
Remove node_modules/ and raw src/ folders if asset footprints must be minimized.
Using SDC to map components to Drupal entities/fields. // tailwind
To integrate Vite, create a standard package.json in your custom theme directory and install the necessary dependencies:
Modern Drupal 10 themes treat JavaScript differently than past versions. jQuery is no longer loaded by default. Front-end architectures leverage native browser features like Fetch API, Web Components, and Vanilla ES6+. Using Drupal behaviors without jQuery
import defineConfig from 'vite'; import path from 'path'; export default defineConfig( build: outDir: 'dist', manifest: true, rollupOptions: input: theme: path.resolve(__dirname, 'src/js/theme.js'), styles: path.resolve(__dirname, 'src/css/theme.css'), , output: entryFileNames: 'js/[name].js', assetFileNames: '[ext]/[name].[ext]', , , , ); Use code with caution. Step 3: Configure Tailwind CSS to Scan Templates
For modernizing Drupal 10 theme development, the most comprehensive and direct resource is the book Modernizing Drupal 10 Theme Development by Luca Lusso Table of Contents The Shift: Why Modernize Drupal 10 Themes
For compiling modern asset pipelines.
Your Tailwind configuration file must explicitly look inside Drupal directories to track utility classes: javascript
Clean markup is a hallmark of modern frontends. Instead of accepting bloated core wrappers, utilize the add_class() and clean_class() attributes natively inside your Twig templates to apply styling conditionally: