[Bug] unknown word error with CRA + tailwindcss about addon-postcss HOT 12 CLOSED

// postcss.config.js

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

// tailwind.config.js

module.exports = {
  // mode: 'jit', <--- Don't activate 'JIT' mode. Storybook is not playing well with it.
  content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'], // <--- Make sure you use the latest convention. Not the 'prune' one.
  ...
  plugins: [require('@tailwindcss/forms')], // <---- Don't put Tailwind related plugins elsewhere but in this file. Notice that 'require('tailwindcss'), require('autoprefixer')' are not included in this array.
};

// .storybook/main.js

const path = require('path');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  stories: [
    path.resolve(__dirname, '../src/**/*.stories.mdx'),
    path.resolve(__dirname, '../src/**/*.stories.@(js|jsx|ts|tsx)'),
  ],

  /** Expose public folder to storybook as static */
  staticDirs: [path.resolve(__dirname, '../public')],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/preset-create-react-app',

    //{ <--- Notice how I'm bypassing @storybook/addon-postcss.
    // I'm commenting it out as I'm waiting for this thing to catch up and work properly with normal Tailwind project setup as described in their documentation.

    //  name: '@storybook/addon-postcss',
    //  options: {
    //    cssLoaderOptions: {
    //      // When you have splitted your css over multiple files
    //      // and use @import('./other-styles.css')
    //      importLoaders: 1,
    //    },
    //    postcssLoaderOptions: {
    //      implementation: require('postcss'),
    //    },
    //  },
    //},
  ],
  framework: '@storybook/react',
  core: {
    builder: 'webpack5',
  },

  // <--- This is the important bit. It's where I use a different postprocessing method using the latest version of 'postcss-loader'.

  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.css$/,
      use: [
        {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: [require('tailwindcss'), require('autoprefixer')],
            },
          },
        },
      ],
      include: path.resolve(__dirname, '../'),
    });
    config.resolve.plugins = [
      ...(config.resolve.plugins || []),
      new TsconfigPathsPlugin({
        extensions: config.resolve.extensions,
      }),
    ];
    return config;
  },
};

// .storybook/preview.js

// <--- The following two lines are critical too. You should make sure you don't process an already processed CSS once more or else you'll get the 'unknown word var' error.

import '!style-loader!css-loader!postcss-loader!tailwindcss/tailwind.css';
import 'tailwindcss/tailwind.css';

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

const path = require('path')

module.exports = {
  content: [path.join(__dirname, './src/**/*.{js,jsx,ts,tsx}')],
  theme: {
    extend: {},
  },
  plugins: [],
}