Storybook | Tailwind in Next.js App with Webpack@5

README.md

Storybook | Tailwind in Next.js App with Webpack@5

Installation

# install storybook dependencies
yarn add @storybook/addon-actions @storybook/addon-essentials @storybook/react -D
yarn add @storybook/addon-postcss@latest -D

# install webpack5 dependency
yarn add @storybook/builder-webpack5@next -D

# install scss dependencies
yarn add css-loader sass-loader style-loader postcss-loader -D

Either you copy and paste the files below into your repository or execute the following commands and then adjust the files:

# setup fresh storybook installation with webpack@5
npx sb@next init --builder webpack5

# update storybook version (required to fix [email protected] issues)
# as of 2021-03-16
npx sb@next upgrade --prerelease

Dependencies

{
  "devDependencies": {
    "@babel/core": "^7.13.10",
    "@storybook/addon-actions": "^6.2.0-rc.1",
    "@storybook/addon-essentials": "^6.2.0-rc.1",
    "@storybook/addon-links": "^6.2.0-rc.1",
    "@storybook/addon-postcss": "2.0.0",
    "@storybook/builder-webpack5": "6.2.0-rc.1",
    "@storybook/react": "^6.2.0-rc.1",
    "babel-loader": "^8.2.2",
    "css-loader": "5.1.3",
    "postcss-loader": "5.2.0",
    "sass-loader": "11.0.1",
    "style-loader": "2.0.0",
    "tailwindcss": "2.0.3"
  }
}

References

• Storybook for Webpack 5
• Instructions for testing Storybook Webpack 5 support
• Storybook doesn't work with the newest version 10.0.1 of PostCSS Autoprefixer plugin · Issue #12668 · storybookjs/storybook
• Configure NextJS with Storybook and TailwindCSS
• Cant add aliases in storybook config · Issue #11989 · storybookjs/storybook

main.js

// .storybook/main.js
const path = require('path')

module.exports = {
  /**
   * Storybook comes with Webpack@4, we must upgrade it to Webpack@5. Because
   * we use Webpack@5 for the rest of our application (e.g. in Next.js).
   *
   * @see https://storybook.js.org/blog/storybook-for-webpack-5/
   * @see https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324#upgrade
   */
  core: {
    builder: 'webpack5',
  },
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    {
      /**
       * Storybook + PostCSS@8 fix
       * @see https://github.com/storybookjs/storybook/issues/12668#issuecomment-773958085
       */
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
  ],
  webpackFinal: config => {
    /**
     * Add *.scss support
     * @see https://nebulab.it/blog/nextjs-tailwind-storybook/
     */
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
    })

    // @see https://github.com/storybookjs/storybook/issues/11989#issuecomment-715524391
    config.resolve.alias = {
      ...config.resolve?.alias,
      '@': [path.resolve(__dirname, '../src/'), path.resolve(__dirname, '../')],
    }
    return config
  },
}

next.config.js

module.exports = {
  // ATTENTION: because of https://github.com/vercel/next.js/issues/21679#issuecomment-771941447
  future: { webpack5: true },
}

preview.js

// .storybook/preview.js
import '../styles/index.scss'

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
}