ปัญหาการตั้งค่า tailwind และ storybook postcss

Aug 17 2020

ฉันมีไฟล์ postccs.config.js ต่อไปนี้:

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

ซึ่งทำให้ฉันสามารถเรียกใช้ tailwind และ storybook ด้วยกันได้อย่างไรก็ตามเมื่อฉันพยายามเรียกใช้แอปพลิเคชันของฉันฉันได้รับข้อผิดพลาดนี้:

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

มีวิธีจัดเตรียมการกำหนดค่า postcss ของ storybook เฉพาะหรือวิธีที่ดีกว่าสำหรับทั้ง 2 เพื่อทำงานกับ config เดียวกันหรือไม่?

คำตอบ

1 Mirkot. Aug 17 2020 at 12:00

คุณต้องดำเนินการตามความต้องการ การกำหนดค่าของคุณควรมีลักษณะดังนี้:

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

สิ่งนี้ได้รับคำตอบก่อนหน้านี้ด้วยเช่นกัน: วิธีกำหนดค่า VueJS + PostCss + Tailwind ด้วย Storybook