Gatsby PostCs未从节点_模块中的组件中清除taildwind样式

我已经创建了一个自定义组件作为它自己的包，它使用了tailwind。我还在这个组件上使用了rollup来构建它（并清除未使用的顺风样式），在构建的文件中，它将its样式注入头部

我认为显示源文件或生成文件没有帮助，但是为组件生成的文件如下所示：

node_modules/@custom/dist/component text.esm.js

var css_248z=“.bg-blue-500{\n--tw-bg不透明度：1；\n背景色：rgba（59,130,246，var（--tw-bg不透明度））\n}\n\n.table{\n display:table\n}\n\n*{\n--tw shadow:0#0000\n}\n\n\n*{\n--tw ring inset:var（--tw empty，/*！/*！/*！*！*/）\n--tw ring offset宽度：0px；\n--color:\n:tw ring offset:（591302460.5）；\n--tw环偏移阴影：0 0#0000；\n--tw环阴影：0 0#0000\n}\n\n@-webkit关键帧旋转{\n到{\n变换：旋转（360度）\n}\n}\n\n@keyframes旋转{\n到{\n变换：旋转（360度）\n}\n}\n\n@-webkit关键帧ping{\n 75%，100%{\n变换：缩放（2）；\n不透明度：0\n}\n}\n\n@keyframesping{\n 75%，100%{\n变换：缩放（2）；\n不透明度：0\n}\n}\n\n@-webkit关键帧脉冲{\n 50%{\n不透明度：.5\n}\n}\n\n@keyframes脉冲{\n 50%{\n不透明度：.5\n}\n}\n\n@-webkit关键帧反弹{\n 0%，100%{\n变换：translateY（-25%）；\n-webkit动画计时函数：立方贝塞尔（0.8,0,1,1）；\n动画计时函数：立方贝塞尔（0.8,0,1,1）\n}\n\n 50%{\n变换：无；\n-webkit动画计时函数：立方贝塞尔（0,0,0.2,1）；\n动画计时函数：立方贝塞尔（0,0,0.2,1）\n}\n}\n\n@keyframes反弹{\n 0%，100%{\n转换：translateY（-25%）；\n-webkit动画计时函数：立方贝塞尔（0.8,0,1,1）；\n动画计时函数：立方贝塞尔（0.8,0,1,1）\n}\n\n 50%{\n变换：无；\n-webkit动画计时函数：立方贝塞尔（0,0,0.2,1）；\n动画计时函数：立方贝塞尔（0,0,0.2,1）\n}\n}\n\n@media（最小宽度：640px）{\n}\n\n@media（最小宽度：768px）{\n}\n\n@media（最小宽度：1024px）{\n}\n\n@media（最小宽度：1280px）{\n}\n\n@media（最小宽度：1536px）{\n}”；
styleInject（css_248z）；
变量文本=函数文本（_ref）{
var children=_ref.children，
大=_ref.large；
如果（大）{
return/*#uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu{
类名：“bg-blue-500”
}，儿童）；
}
return/*#uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu{
类名：“bg-blue-500”
}，儿童）；
};
exports.Text=文本；

我没有把整个文件的内容都放进去，因为它有很多样板文件，但是

styleInject

只是创建了一个样式标签，将css放入其中，并将其附加到页面的头部。现在在我的盖茨比应用程序中，我将其导入到一个组件中，但我也添加了一些自定义样式，如：

my component.tsx

从“React”导入React；
从“道具类型”导入道具类型；
从“@custom/component Text”导入{Text}；
常量段落=（）=>{
返回(
试验
测试

)
};

我在盖茨比使用postcss插件，我的

tailwind.config.js

插件设置如下：

tailwind.config.js

module.exports={
清除：{
启用：对，
内容：[
“./src/***.{js，jsx，ts，tsx}”，
“./node_modules/@custom/**.{js，jsx，ts，tsx}”，
],
},
暗模式：false、//或“媒体”或“类”
主题：{
扩展：{}，
},
变体：{
扩展：{}，
},
插件：[]，
}

---

现在，当我运行

gatsby develop

时，它将组件样式放入样式标签中，但也放入

应用程序中。css

它仍然重新定义

。bg-blue-500

。我不确定我做错了什么，但它应该删除

的一个实例。bg-blue-500

postss plus Tailwind似乎只在生产中起作用（

gatsby build

）默认情况下。发件人：

注意：默认情况下，PurgeCSS仅在build命令上运行，因为它是一个 进程相对较慢。开发服务器将包括所有 Tailwind类，因此强烈建议您在构建上进行测试 在部署之前，请访问服务器

和来自：

我们建议只删除生产中未使用的样式，如删除 它们在开发中意味着您需要在更改时重新编译 启用PurgeCSS的模板和编译要慢得多

您可以尝试通过以下方式更改默认行为：

// gatsby-config.js
{
 resolve: 'gatsby-plugin-postcss',
    options: {
        postCssPlugins: [require('tailwindcss')('./tailwind.config.js')],
     },
 },
 {
  resolve: `gatsby-plugin-purgecss`,
  options: { 
    tailwind: true,
    develop: true // add this if needed
  }
}

资料来源：