start-storybook works, build-storybook does not (Tailwind styles not loaded)

[arondeparon]

I'm working on a React (TypeScript) front-end that uses Tailwindcss and it seems like my Tailwind styles are not being loaded when I run build-storybook, although everything works fine when I just run start-storybook.

I'm guessing that the issue is related to a Webpack configuration issue, but I don't see any errors so I'm not sure where to start. Any ideas?

Here is a snapshot of my Storybook configuration:

main.js

const path = require('path')

module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ],
  "core": {
    "builder": "webpack5"
  },
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.css$/,
      use: [
        {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              ident: 'postcss',
              plugins: [
                require('tailwindcss'),
                require('autoprefixer'),
              ],
            }
          },
        },
        'sass-loader',
      ],
      include: path.resolve(__dirname, '../'),
    })
    return config
  }
}

preview.js

import '../resources/css/app.css';

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  backgrounds: {
    default: 'Light gray',
    values: [
      {
        name: 'Light gray',
        value: '#D9D9D9'
      },
    ],
  },
}