Tailwind and storybook setup postcss config issue

Question

I have the following postccs.config.js file:

module.exports = {
    plugins: [
        require("postcss-import"),
        require("tailwindcss"),
        require("autoprefixer"),
    ],
}

which allows me to run tailwind and storybook together, however when I try to run my application, I get this error:

Error: A PostCSS Plugin was passed as a function using require(), but it must be provided as a string.

Is there a way to provide a specific storybook postcss config or even a better way for the 2 to work with the same config?

Mirko t. · Accepted Answer · 2020-08-17 12:00:53Z

3

you need to execute the require. Your config should look like this:

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

also this was answered before @see: How to configure VueJS + PostCss + Tailwind with Storybook

answered Aug 17, 2020 at 12:00

Mirko t.

5012 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Aessandro Over a year ago

It doesn't solve the issue, storybook runs fine but the not the application.

Mirko t. Over a year ago

Do you still get the same Error ? 🤔

Collectives™ on Stack Overflow

Tailwind and storybook setup postcss config issue

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related