Next.js 10 webpack5 + Storybook 6.2.9 + Tailwind / Not loading CSS

Hi, I’ve installed storybook on Next.js 10 with webpack5 + Storybook 6.2.9 + Tailwind, but I can’t see the CSS styles, as you can see in this image:

main.js

module.exports = {
  stories: [
    '../components/**/*.stories.mdx',
    '../components/**/*.stories.@(js|jsx|ts|tsx)',
    '../components/stories/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-create-react-app',

    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
  ],

  webpackFinal: (config) => {
    config.module.rules.push({
      test: /\.scss$/,
      sideEffects: true,
      use: ['react-style-loader', 'css-loader', 'sass-loader'],
    })

    return config
  },
}

I check all github related issues, but I don’t want to downgrade Tailwind to use Storybook, is there anything I can do?

Thanks in advance!

[sshquack]

No luck. I got rid of storybook and moved to Ladle (by Uber team). Ladle is built on Vite and it works out of the box with TailwindCSS and it’s blazing fast!

Note that storybook-postcss plugin has pretty much been abandoned (last commit 2021 Jan) and the storybook team has other priorities. So the chances of all the issues in this repo getting fixed is pretty low. So use best judgment.

[sshquack]

After following the addon-postcss I’m seeing this error too. SB fails to build with CRA TW and SB with this error:

99% done plugins webpack-hot-middlewarewebpack built preview 5f7ac74125465130ad66 in 4135ms
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(1:1) /Users/ayemacair/Desktop/code/js/react-ts-tw-sb-01/src/index.css Unknown word

> 1 | var api = require("!../node_modules/@storybook/addon-postcss/node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");
...

Deps:

• Storybook 6.4.9
• @storybook/addon-postcss 2.0.0

Full repro: https://github.com/sshquack/react-ts-tw-sb-01

Any idea on how to get past this issue?