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 project (vue-cli 3.0.5)
2. @storybook/vue (4.0.0-alpha.25)
3. tailwindcss (0.6.5)
4. Create component using <style lang="postcss"> ... </style>
5. Use Tailwind @apply within style block to apply utility classes to component

The issue I run into is that any components I create stories for using lang="postcss" fail during compilation when running storybook.

I tried adding a custom webpack config which stops the errors but none of my components is styled still.

const path = require('path')

module.exports = {
    module: {
        rules: [
            {
                test: /\.postcss$/,
                loaders: ["style-loader", "css-loader", "postcss-loader"],
                include: path.resolve(__dirname, '../')
            }
        ]
    }
}

I've also tried importing my app.postcss (which imports tailwind) within the stories.js file itself to no avail. Any help would be appreciated.

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)

Answer 2

I've never used tailwindCSS or postCSS (explicitly) before, so I decided to take this as an opportunity to learn to setup/configure both of these.

You can find a complete example with Tailwind-styled components in storybook here: https://github.com/gurupras/vuejs-postcss-tailwind-with-storybook

Steps

• Set up VueJS project: vue create vue-postcss-tailwind-storybook
• Install and initialize tailwindCSS
  • npm install tailwindcss
  • ./node_modules/.bin/tailwind init (generates tailwind.config.js)
• Update postcss.config.js to contain the following:

module.exports = {
  plugins: [
    require('tailwindcss')('tailwind.config.js'),
    require('autoprefixer')()
  ]
}

• Add Vue storybook plugin
  • vue add storybook
• Add a CSS file containing the tailwind directives (e.g. src/style/tailwind.css)

@tailwind base;
@tailwind components;
@tailwind utilities;

• optional Add import '@/style/tailwind.css' to your main.js to ensure that they're available to all parts of your app
• Create your component
  • I'm going to assume the following component exists: src/components/alert.vue
• Set up your story

src/stories/alert.stories.js

/* eslint-disable import/no-extraneous-dependencies */
import { storiesOf } from '@storybook/vue'

// You need to import this once
import '@/style/tailwind.css'

import Alert from '@/components/alert.vue'

storiesOf('Alert', module)
  .add('with text', () => ({
    components: { Alert },
    template: '<Alert text="Test alert" :show-close="true"/>'
  }))

• Run storybook npm run storybook:serve
• Develop your component on storybook while having tailwindCSS available!

Hope this helps with your setup. Meanwhile, I'm going to read up and see how TailwindCSS can help me create better components!