TailwindCSS 的使用与反应中的样式组件混淆答案

【问题标题】：Usage of TailwindCSS messes with styled components in reactTailwindCSS 的使用与反应中的样式组件混淆
【发布时间】：2021-10-18 00:54:55
【问题描述】：

我遇到的问题只是简单的解释。我作为前端开发人员从事一个项目，并使用带有样式组件的反应来做到这一点。我的同事使用 TailwindCSS。现在我尝试将东西合并在一起，但似乎每当我激活 Tailwind 和我的拼贴画的组件时，它都会稍微弄乱我的样式组件，所以它们看起来不正常，即使他没有处理这些文件并且从未做过他们里面的任何东西。我有什么遗漏或应该寻找的吗？

提前谢谢你。

【问题讨论】：

您好，您可以添加一个可重现的示例吗？您可以使用代码和框。阅读这个 stackoverflow.com/help/minimal-reproducible-example

标签： reactjs styled-components tailwind-css

【解决方案1】：

我不知道你们是如何合作的，但是将样式组件与 tailwind 集成的正确方法是使用 attr 函数来添加样式

const Card = styled.div.attrs({ className: "bg-white mx-auto max-w-sm shadow-lg rounded-lg" })` ["Your styles and props"]`;
//and even extend later
<Card className="overflow-hidden">Content</Card>

否则，某些顺风的全局样式可能会影响您不希望发生的组件（这可能是您发生的事情）。

【讨论】：