Tailwindcss-module: Integration with Storybook

[filsuck]

I'm planning to use this module in my project alongside with Storybook, it's working perfectly fine but it's not working in storybook environment, is there anything that I missed, or should I create postcss config? since it's different from the older version of tailwindcss

using:
@nuxtjs/tailwindcss": "^1.0.0
@storybook/vue": "^5.3.17

thank you!

[Atinux]

Hi @filsuck

Can you create a reproduction so we can help you?
You can fork from https://codesandbox.io/s/o4vn5pvp7q or directly create a Github repo.

[filsuck]

Hi @filsuck

Can you create a reproduction so we can help you?
You can fork from https://codesandbox.io/s/o4vn5pvp7q or directly create a Github repo.

Hi @Atinux ,
thanks for replying, I'm already creating github repo for reproduction of this issue https://github.com/filsuck/bookstory-tailwind-nuxt

[dontw]

I have the same issue and found this solution on stackoverflow:
https://stackoverflow.com/questions/53027576/how-to-configure-vuejs-postcss-tailwind-with-storybook

[HoraceKeung]

I had the same issue and in my .storybook folder, I had to set up separated postcss.config.js and webpack.config.js files for Storybook. I know that with Nuxt 2.12 we can expose webpack config https://github.com/nuxt/nuxt.js/pull/7029, but I am not sure how to set it up for Storybook yet, would like to see an example as well.

[Atinux]

Could you try in your .storybook/webpack.config.js:

const path = require('path')
const { getWebpackConfig } = require('nuxt')

module.exports = getWebpackConfig('client', {
  rootDir: path.join(__dirname, '..')
})

[filsuck]

const path = require('path')
const { getWebpackConfig } = require('nuxt')

module.exports = getWebpackConfig('client', {
  rootDir: path.join(__dirname, '..')
})

I got this error
ERR! TypeError: getWebpackConfig is not a function

[Atinux]

Please use latest Nuxt version @filsuck (v2.12.X)

[HoraceKeung]

I am getting errors with the new setup, here is a repo to reproduce the issue https://github.com/HoraceKeung/nuxt-tailwind-storybook

Getting an error saying "Module not found: Error: Can't resolve '~/assets/img'",

as I am using

:src="require(`~/assets/img/${props.type}.png`)"

in the AlertBox component.

There is a second error: "ERROR in ./assets/css/tailwind.css 1:0
Module parse failed: Unexpected character '@' ", I think this is because I import '../assets/css/tailwind.css' in preview.js (in .storybook folder).

To reproduce the issue, please clone the repo, install dependencies and run npm run storybook.

[aldarund]

It seems that you need to define aliases for storybook webpack
see guide here https://medium.com/js-dojo/a-guide-on-using-storybook-with-nuxt-js-1e0018ec51c9
reference config sample
https://github.com/mstrlaw/nuxt-storybook/blob/master/.storybook/webpack.config.js
but you probably need to add also ~ as alias

[f3ltron]

EDIT: for the main.js check my next comments

The problem is you have to merge some of the storybook config my workaround works. Maybe it could be improve.

my .storybook/preview.js import tailwind.css

import Vue from 'vue'
import { configure } from '@storybook/vue'
import '@/assets/css/tailwind.css'

Vue.component('nuxt-link', {
  props:   ['to'],
  methods: {
    log() {
      action('link target')(this.to)
    },
  },
  template: '<a href="#" @click.prevent="log()"><slot>NuxtLink</slot></a>',
})

configure(require.context('../components', true, /\.stories\.js$/), module);

.storybook/main.js

const { getWebpackConfig } = require('nuxt')

module.exports = {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.
    webpackFinal: async (sbWebpack, { configType }) => {

        const nuxtWebpack = await getWebpackConfig('client', {
            for: process.env.NODE_ENV === 'production' ? 'build' : 'dev'
        })

        const recomposedWebpackConfig = {
            mode: nuxtWebpack.mode,
            devtool: nuxtWebpack.devtool,
            entry: sbWebpack.entry,
            output: sbWebpack.output,
            bail: sbWebpack.bail,
            module: {
                rules: [
                    ...nuxtWebpack.module.rules.map(el => {
                        const reg = RegExp(el.test);
                        if (reg.test(".postcss")) {
                            el.oneOf[1].use.push({
                                loader: 'postcss-loader',
                                options: {
                                    ident: 'postcss',
                                    plugins: [
                                    require('tailwindcss')('./tailwind.config.js'),
                                    require('autoprefixer'),
                                    ],
                                },
                            })
                        }
                        return el;
                    })
                ]
            },
            plugins: [
                ...sbWebpack.plugins,
            ],
            resolve: {
                extensions: nuxtWebpack.resolve.extensions,
                modules: nuxtWebpack.resolve.modules,
                alias: {
                    ...nuxtWebpack.resolve.alias,
                    ...sbWebpack.resolve.alias,
                },
            },
            optimization: sbWebpack.optimization,
            performance: {
                ...sbWebpack.performance,
                ...nuxtWebpack.performance
            }
        }

        return recomposedWebpackConfig;
    },
};

[f3ltron]

ps: it's just working if you use apply here but not for class

<template>
  <div id="test" class="bg-mtl-accent">
    bonjour
  </div>
</template>

<script>
export default {}
</script>

<style lang="postcss">
#test {
  @apply bg-mtl-accent;
}
</style>

[f3ltron]

if you want to help or check my implementation

https://github.com/vuemontreal/vuemontreal/pull/158

[f3ltron]

ok update all is working with

.storybook/main.js

const { getWebpackConfig } = require('nuxt')

module.exports = {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.
    webpackFinal: async (sbWebpack, { configType }) => {

        const nuxtWebpack = await getWebpackConfig('client', {
            for: process.env.NODE_ENV === 'production' ? 'build' : 'dev'
        })

        const recomposedWebpackConfig = {
            mode: nuxtWebpack.mode,
            devtool: nuxtWebpack.devtool,
            entry: sbWebpack.entry,
            output: sbWebpack.output,
            bail: sbWebpack.bail,
            module: {
                rules: [
                    ...nuxtWebpack.module.rules.map(el => {
                        const reg = RegExp(el.test);
                        if (reg.test(".postcss") || reg.test(".css")) {
                            console.log(el.oneOf);
                            el.oneOf = el.oneOf.map(e => {
                                e.use.push({
                                    loader: 'postcss-loader',
                                    options: {
                                        ident: 'postcss',
                                        plugins: [
                                        require('tailwindcss')('./tailwind.config.js'),
                                        require('autoprefixer'),
                                        ],
                                    },
                                })
                                return e;
                            })
                        }
                        return el;
                    })
                ]
            },
            plugins: [
                ...sbWebpack.plugins,
            ],
            resolve: {
                extensions: nuxtWebpack.resolve.extensions,
                modules: nuxtWebpack.resolve.modules,
                alias: {
                    ...nuxtWebpack.resolve.alias,
                    ...sbWebpack.resolve.alias,
                },
            },
            optimization: sbWebpack.optimization,
            performance: {
                ...sbWebpack.performance,
                ...nuxtWebpack.performance
            }
        }

        return recomposedWebpackConfig;
    },
};

Tell me if we can refacto this.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.