Config Storybook 6 + Tailwind 3 + next.js 12

main.js

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

module.exports = {
  stories: ["../ui-kit/**/*.stories.mdx", "../@(modules|ui-kit)/**/*.stories.@(js|jsx|ts|tsx)"],
  staticDirs: ["../public"],
  core: {
    builder: "webpack5",
  },
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
  ],
  managerEntries: ["@storybook/addon-postcss"],
  framework: "@storybook/react",
  webpackFinal: async (config) => {
    // Support for TS aliases
    config.resolve.plugins = config.resolve.plugins || []
    config.resolve.plugins.push(new TsconfigPathsPlugin())

    /**
     * Fixes import with /
     * @see https://github.com/storybookjs/storybook/issues/12844#issuecomment-867544160
     */
    config.resolve.roots = [path.resolve(__dirname, "../public"), "node_modules"]

    // Load tailwind styles
    config.module.rules.push({
      test: /\.css$/,
      use: [
        {
          loader: "postcss-loader",
          options: {
            postcssOptions: {
              plugins: [require("tailwindcss"), require("autoprefixer")],
            },
          },
        },
      ],
      include: path.resolve(__dirname, "../"),
    })

    return config
  },
}

// And import global styles in .storybook/preview.js
// import "../styles/global.css"