Tailwind and storybook setup postcss config issue

user_1312785 0
Viewed 3564

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?

enter image description here

storybook tailwind-css javascript
1 Answers

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

user_134843480
Related