时间戳

首页 > 解决方案 > TailwindCSS 的使用与反应中的样式组件混淆

reactjs - TailwindCSS 的使用与反应中的样式组件混淆

问题描述

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

先感谢您。

标签： reactjsstyled-componentstailwind-css

解决方案

我不知道你是如何一起工作的，但是将样式组件与 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>

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

推荐阅读