How to configure VueJS + PostCss + Tailwind with Storybook

Question

Anyone have success setting up a project using VueJS, PostCss, and Tailwind with component development in Storybook?

I\'ve gotten this far:

1. New vue

Answer 1

I've got a fully working example of Svelte + TailwindCSS + Storybook in this github repo https://github.com/jerriclynsjohn/svelte-storybook-tailwind

But Integrating should be very much similar:

1. Once TailwindCSS is integrated with your Vue project, then follow on.
2. Add a custom webpack.config.js in your .storybook folder and add the following:

const path = require('path');

module.exports = ({ config, mode }) => {

  config.module.rules.push({
    test: /\.css$/,
    loaders: [
      {
        loader: 'postcss-loader',
        options: {
          sourceMap: true,
          config: {
            path: './.storybook/',
          },
        },
      },
    ],

    include: path.resolve(__dirname, '../storybook/'),
  });

  return config;
};

3. Create a postcss.config.js in your .storybook folder with the following:

var tailwindcss = require('tailwindcss');

module.exports = {
  plugins: [
    require('postcss-import')(),
    tailwindcss('./tailwind.config.js'), //This refers to your tailwind config
    require('autoprefixer'),
  ],
};

4. Add a utils.css file in your storybook folder

@import 'tailwindcss/base';

@import 'tailwindcss/components';

@import 'tailwindcss/utilities';

5. Reference your CSS file in the <>.stories.js:

import '../../css/utils.css';

I really recommend you refer to the implementation in the github repo, it also has things that are specific to Storybook. (Github)