Webpack configuration with postcss and tailwind fails

[thaoms]

Whenever I use the Tailwind @apply directive I get an error

The bg-charcoal-color-400 class does not exist. If you're sure that bg-charcoal-color-400 exists, make sure that any @import statements are being properly processed before Tailwind CSS sees your CSS, as @apply can only be used for classes in the same CSS tree.

The same webpack config works fine for a regular production build AND for Storybook. So it's definitely something with cypress component testing.

I've been trying to fix this for days, so if anyone has an idea?

plugins/index.js

const preprocess = require('./preprocess');

module.exports = (on, config) => {
    if (config.testingType === 'component') {
        const { startDevServer } = require('@cypress/webpack-dev-server')

        // Your project's Webpack configuration
        const webpackConfig = require('../../webpack.config.js')

        on('dev-server:start', (options) =>
            startDevServer({ options, webpackConfig })
        )
    }

    on('file:preprocessor', preprocess);
}

plugins/preprocess.js

const webpack = require('@cypress/webpack-preprocessor')

const options = {
    webpackOptions: require('../../webpack.config.js')
};

module.exports = webpack(options);

Webpack.config.js

module.exports = {
    mode: 'development',
    devtool: false,
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.css', 'pcss'],
    },
    module: {
        rules: [
            {
                test: /\.(pcss|css)$/,
                include: /src|node_modules/,
                use:
                    [
                        'style-loader',
                        // Translates CSS into CommonJS
                        {
                            loader: 'css-loader',
                            options: {
                                importLoaders: 1,
                            },
                        },
                        'postcss-loader',
                    ]
            },
            {
                test: /\.tsx?$/,
                exclude: [/node_modules/],
                use: [
                    {
                        loader: 'ts-loader',
                        options: {
                            // skip typechecking for speed
                            transpileOnly: true,
                        },
                    },
                ],
            },
        ],
    },
}

index.ts

import 'tailwindcss/tailwind.css'

import './base.pcss'
import './utilities.pcss'

...

postcss.config

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
}