Issue trying to set up Nextjs, Tailwind and Storybook with Yarn Berry

[jonparkdev]

Discussed in https://github.com/storybookjs/storybook/discussions/15961

I am going to assume this is an issue that others may run into when starting a project with these frameworks.

For ease of set, here is demo repo of the result of instructions below:

https://github.com/jonparkdev/storybook-tailwind-nextjs-yarn2

^{Originally posted by **jonparkdev** September 1, 2021} I am trying to set up a nextjs app with tailwind and storybook storybook. I have scoured the issues thread for a solution and found some familiar issues but none of the solutions have yet to solve my issue. I will reproduce my set steps below. Thanks! ## 1. Set up Yarn Berry and Basic Monorepo setup ```$ yarn set version berry``` ```$ yarn init``` #### In `package.json` set up workspaces ```json { "name": "my-project", "packageManager": "yarn@3.0.1", "workspaces": [ "packages/**" ], "private": true } ``` ```$ mkdir packages``` **Also run these commands to install Typescript at the base of the monorepo (for reason's outside the scope of this)** ```$ yarn add -D typescript@~4.3``` ```$ yarn dlx @yarnpkg/sdks vscode``` (if you use vscode, @see https://yarnpkg.com/getting-started/editor-sdks for other IDE's) Then in the bottom right hand corner of vscode, select your vscode workspace typescript version type. Should be something like 4.3.5 ## 2. set up nextjs ```$ cd packages ``` ```$ yarn create next-app --typescript``` **name the app whatever, I went with the default, `my-app`** ## 3. set up storybook ```$ yarn dlx -p @storybook/cli sb init``` **By this point if you run yarn storybook all should be still working** ## 4. Set up tailwind ```$ yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest``` ```$ npx tailwindcss init -p``` **Nextjs uses Postcss8 and Storybook Postcss7, so we need to make some changes to Storybook** ```$ yarn add -D @storybook/addon-postcss``` Update the /packages/my-app/.storybook/main. Should look like: ``` module.exports = { stories: [ "../stories/**/*.stories.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)", ], addons: [ "@storybook/addon-links", "@storybook/addon-essentials", { name: "@storybook/addon-postcss", options: { postcssLoaderOptions: { implementation: require("postcss"), }, }, }, ], }; ``` Now if you try to run yarn storybook, you get a module error message. the tldr is ```Loading PostCSS "tailwindcss" plugin failed: postcss-loader tried to access tailwindcss, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.``` So I suspect that the storybook is using the `postcss.config.js` generated by tailwind ## Things I have tried: #### 1. adding a webpackFinal to the /packages/my-app/.storybook/main to seperatly incorperate the postcss-loader, so: ``` const path = require("path"); module.exports = { stories: [ "../stories/**/*.stories.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)", ], addons: [ "@storybook/addon-links", "@storybook/addon-essentials", { name: "@storybook/addon-postcss", options: { postcssLoaderOptions: { implementation: require("postcss"), }, }, }, ], webpackFinal: async (config) => { config.module.rules.push({ test: /\.css$/, use: [ { loader: "postcss-loader", options: { postcssOptions: { plugins: [require("tailwindcss"), require("autoprefixer")], }, }, }, ], include: path.resolve(__dirname, "../"), }); return config; }, }; ``` #### 2. Some threads talk about using postcss7 compatible tailwind packages and removing the @storybook/postcss-addon, so ```npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9``` #### 3. Downgrading @storybook/** packages to 6.2.4 (or other arbitrary v6.2.*) Anyways, I felt I have spent quite a bit of time on this, so if anyone can provide me with some insight to what may be going on, it would greatly appreciated! Interestingly if you modify postcss.config.js from: ``` module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, } ``` to -----> ``` module.exports = { plugins: [require("tailwindcss"), require("autoprefixer")] } ``` Storybook will run but... Nextjs will then be broken because > If your postcss.config.js needs to support other non-Next.js tools in the same project, you must use the interoperable object-based format instead:

[sairajchouhan]

@jonparkdev did you find any workaround for this

[shilman]

cc @chantastic

[jonparkdev]

@sairaj2119 Not a the moment, it was a blocker for my project so I proceeded without using storybook.

[sairajchouhan]

Same thing, I cannot compromise on tailwind so I just ignored storybook

[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?

[ariboren]

Hey folks. I was able to resolve this in Storybook 6.5.9 and Next 12.1.4 with the following postcss.config.js, as per this suggestion:

module.exports = {
    plugins: [require.resolve('tailwindcss'), require.resolve('autoprefixer')],
};

Hope this is helpful.

[valentinpalkovic]

In Storybook 7, we did a lot of optimizations regarding Next.js. Just follow the documentation to setup the @storybook/nextjs framework: https://storybook.js.org/docs/8.0/get-started/nextjs. Checkout even the latest prerelease version of Storybook 8 to be up to date: npx storybook@next upgrade. I am closing this issue. Let us know if you still encounter any issues.

Further notes:

• The https://storybook.js.org/addons/@storybook/addon-postcss is deprecated in favor of https://storybook.js.org/addons/@storybook/addon-styling-webpack. The addon shouldn't be necessary in the combination with Next.js, though.