Monday, 18 November 2019

How to configure VueJS + PostCss + Tailwind with Storybook

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 are 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.



from How to configure VueJS + PostCss + Tailwind with Storybook

No comments:

Post a Comment