I'm working on a TypeScript-React-Next.js-Tailwind CSS application.
I've been trying to configure Storybook with Tailwind CSS. I tried adding PostCSS as an add on as instructed in the docs to no avail.
Current main.js file in .storybook:
const path = require('path')
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/preset-create-react-app"
],
webpackFinal: async (config) => {
config.module.rules.push({
test: /\,css&/,
use: [
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('tailwindcss'),
require('autoprefixer')
]
}
}
],
include: path.resolve(__dirname, '../'),
})
return config
}
}
Current package.json:
{
"name": "vimi",
"version": "0.1.0",
"private": true,
"scripts": {
"codegen": "graphql-codegen --config codegen.yml",
"dev": "next dev",
"build": "next build && next export",
"start": "next start",
"lint": "next lint",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"dependencies": {
"@apollo/client": "^3.4.7",
"@auth0/auth0-react": "^1.6.0",
"@aws-amplify/ui-react": "^1.2.20",
"@graphql-tools/merge": "^7.0.0",
"@graphql-tools/schema": "^8.0.3",
"@headlessui/react": "^1.3.0",
"@heroicons/react": "^1.0.1",
"@hookform/resolvers": "^2.8.2",
"aws-amplify": "^4.3.2",
"aws-appsync-auth-link": "^3.0.6",
"date-fns": "^2.25.0",
"graphql": "^15.5.1",
"immer": "^9.0.5",
"jotai": "^1.1.2",
"next": "^12.0.1",
"phin": "^3.6.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-google-button": "^0.7.2",
"react-hook-form": "^7.17.1",
"yup": "^0.32.9"
},
"devDependencies": {
"@babel/core": "^7.16.5",
"@graphql-codegen/cli": "^2.1.1",
"@graphql-codegen/import-types-preset": "^2.0.0",
"@graphql-codegen/typescript": "^2.1.2",
"@graphql-codegen/typescript-operations": "^2.0.1",
"@graphql-codegen/typescript-react-apollo": "^3.0.0",
"@storybook/addon-actions": "^6.4.9",
"@storybook/addon-essentials": "^6.4.9",
"@storybook/addon-links": "^6.4.9",
"@storybook/react": "^6.4.9",
"@tailwindcss/forms": "^0.3.3",
"@tailwindcss/postcss7-compat": "^2.2.17",
"@types/react": "17.0.11",
"autoprefixer": "^9.8.8",
"babel-loader": "^8.2.3",
"eslint": "7.28.0",
"eslint-config-next": "11.0.0",
"graphql-auto-transformer": "^1.3.1",
"graphql-let": "^0.18.4",
"import-sort-style-react2": "^0.3.6",
"postcss": "^7.0.39",
"prettier": "^2.3.2",
"prettier-plugin-import-sort": "^0.0.7",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17",
"typescript": "4.3.2",
"yaml-loader": "^0.6.0"
},
"importSort": {
".js, .jsx, .ts, .tsx": {
"style": "react2",
"parser": "typescript"
}
}
}
I also followed the instruction in this Medium post and Stack Overflow answer without any luck.
Even though Storybook starts up fine, in the building process, I get the following error, and I see Tailwind CSS hasn't worked on my components (stories):
info @storybook/react v6.4.9
info
info => Loading presets
ERR! Addon value should end in /register OR it should be a valid preset https://storybook.js.org/docs/react/addons/writing-presets/
ERR! @storybook/preset-create-react-app
I don't understand why this preset is invalid. Even when I simply put the add on:
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-postcss",
],
"framework": "@storybook/react"
}
I get the error:
info @storybook/react v6.4.9
info
info => Loading presets
ERR! Addon value should end in /register OR it should be a valid preset https://storybook.js.org/docs/react/addons/writing-presets/
ERR! @storybook/addon-postcss
Any help would be much appreciated!