question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Integration with Storybook

See original GitHub issue

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!

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:3
  • Comments:14

github_iconTop GitHub Comments

3reactions
jsbaguettecommented, May 2, 2020

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.

1reaction
Atinuxcommented, Apr 6, 2020

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Design integrations for Storybook - JS.ORG
Storybook's API allows you to endlessly extend and configure Storybook. Integrate via an addon to customize Storybook's own UI and functionality ...
Read more >
Design with Code: Storybook Integration - UXPin
Try UXPin and Storybook integration to design with code components, making your design process fast and consistent. No matter which framework you use!...
Read more >
Getting started with Storybook Integration | Zeplin Help Center
Zeplin's Storybook integration lets you link Zeplin components to stories in Storybook easily. Once it's set up, you can access Storybook code snippets...
Read more >
Storybook and Figma
Storybook is an open source tool for developing, testing, and documenting UI components across many. Use Storybook to: Create code-based...
Read more >
Storybook - zeroheight
Storybook. Connect Storybook · Storybook layout · Troubleshoot Storybook.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found