Tailwind styles from Twig not included in component-level CSS (Drupal SDC + Webpack)

[Sergey98Am]

I have a Drupal project where I’m using Tailwind CSS v3 with Webpack. There is a main.js file that imports main.css, and Tailwind classes used inside Twig files are being built correctly.

My Tailwind config looks like this:

content: [
  './templates/**/*.html.twig',
  './components/**/*.twig',
  './components/**/*.stories.json',
  './components/**/*.stories.yml',
  './*.theme',
],

Everything works perfectly in this setup.

However, I need to generate separate CSS and JS files for each component instead of having everything bundled only into main.js and main.css.

When using Single Directory Components (SDC) in Drupal, if a component has its own CSS and JS files inside its folder, they are automatically attached when the component is used. Therefore, having a separate CSS file per component is more beneficial than building all component styles into a single global file.

I updated my Webpack configuration to support component-based entries. Now it builds separate CSS and JS files for each component, but only when I add CSS/JS inside the component’s src folder.

The problem is:
Tailwind classes used inside component Twig files are still only included in the global main.css, not in the component-specific CSS files.

So currently:
• Component JS/CSS files are generated ✔️
• But Tailwind styles from Twig are only compiled into main.css ❌

Here is my Webpack config:

// webpack.config.js
const path = require("path");
const { glob } = require("glob");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

// === DEBUG: Show what the glob finds ===
const componentFiles = glob.sync('components/*/src/*.js');
console.log('=== Webpack Debug ===');
console.log('Found component JS files:', componentFiles.length ? componentFiles : 'NONE - Check your folder structure!');
console.log('========================');

// === MAIN ENTRIES (most important) ===
const mainEntries = {
    main: './js/main.js',
    carousel: './js/carousel.js',
};

// === COMPONENT ENTRIES (SDC support) ===
// ONLY supports: components/my-component/src/my-component.js
const componentEntries = Object.fromEntries(
    componentFiles
        .map((file) => {
            const srcDir = path.dirname(file);
            const compDir = path.dirname(srcDir);
            const name = path.basename(compDir);

            if (path.basename(file) === `${name}.js`) {
                console.log(`→ Adding component: ${name}  (${file})`);
                return [name, `./${file}`];
            }
            return null;
        })
        .filter(Boolean)
);

const entry = {
    ...mainEntries,
    ...componentEntries,
};

if (Object.keys(componentEntries).length === 0) {
    console.warn('⚠️  No SDC components were added. Make sure files exist at: components/YOUR-COMPONENT/src/YOUR-COMPONENT.js');
}

module.exports = {
    mode: 'production',
    context: path.resolve('.', ''), // theme root
    entry,

    output: {
        filename: (pathData) => {
            const name = pathData.chunk.name;
            if (name === 'main' || name === 'carousel') {
                return `dist/[name].js`;
            }
            return `components/[name]/[name].js`;
        },
        path: path.resolve('.', ''),
    },

    devtool: false,

    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "postcss-loader",
                ]
            },
        ]
    },

    plugins: [
        new MiniCssExtractPlugin({
            filename: (pathData) => {
                const name = pathData.chunk.name;
                if (name === 'main' || name === 'carousel') {
                    return `dist/[name].css`;
                }
                return `components/[name]/[name].css`;
            },
        }),
    ],
};

button component example

Screen.Recording.2026-04-08.at.15.51.09-2.mp4

In short, I want Tailwind to generate component-level CSS based on Twig usage inside each component, not only in the global bundle.

[wongjn]

For each component, have a tailwind.config.js config. This should have content array that only points to its own files. Consider using the presets feature to share theme configuration between several components.

For each component CSS file:

• In the @tailwind directives.
• Use the @config directive to point to the component's own tailwind.config.js.

However, I personally would not split the CSS per component - you will get a lot of duplication. Tailwind is best used "globally". Hence instead, I'd keep the CSS in a singular global CSS file. Yes, there would be some redundant CSS on some pages. However, having the CSS file in the global CSS file included in the global CSS file cache means it would only be downloaded to the browser once and then cached for all other pages, negating the byte transfer cost.

[Sergey98Am]

@wongjn Do you mean duplicates of directives?

@config "../tailwind.config.js";

@tailwind base;
@tailwind components;
@tailwind utilities;

[wongjn]

I mean duplicates of directives and also duplicates of CSS rules in compiled CSS.

[Sergey98Am]

Saying directives I also meant CSS that is generated after compiling, as I understand it's the same CSS rules that you've mentioned.

Example

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

and more code...