DEV Community

Vincent Le Calvez
Vincent Le Calvez

Posted on

Use Storybook with tailwind on a Vue 2 project

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
Enter fullscreen mode Exit fullscreen mode
yarn add -D storybook
Enter fullscreen mode Exit fullscreen mode
npx sb init
Enter fullscreen mode Exit fullscreen mode

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
  },
}
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
henripqt profile image
henripqt

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 ?