Skip to content

Instantly share code, notes, and snippets.

@natterstefan
Last active May 1, 2022
Embed
What would you like to do?
Storybook | Tailwind in Next.js App with Webpack@5

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 PostCSS@8.x 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/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
},
}
module.exports = {
// ATTENTION: because of https://github.com/vercel/next.js/issues/21679#issuecomment-771941447
future: { webpack5: true },
}
// .storybook/preview.js
import '../styles/index.scss'
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment