npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
yarn add -D storybook
npx sb init
Add a custom webpack.config.js in your .storybook folder and add the following:
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
},
}
Top comments (1)
Not working on my side. Also I'm wondering how and why would you end up with a '@storybook/preset-create-react-app' addon when this post refers to VueJS^2 ?