如何使用TailwindCSS样式化React组件

Question

我在一个React项目中使用TailwindCSS。我可以通过在className属性中传递TailwindCSS实用程序类来设置普通HTML元素的样式，但是当我在组件className属性中传递实用程序类时，这不起作用，如下所示：

<Dropdown className="hidden sm:block sm:ml-6"/>

Dropdown是导入到另一个组件中的React组件。

我该怎么做呢？

Answer 1

如果<Dropdown/>是您可能忘记在组件定义中的div中包含的自定义组件，

您可以将"className“重命名为customclass，并将其应用于组件定义中。

因此，您的代码将如下所示

<Dropdown customclasses="hidden sm:block sm:ml-6"/>

您的组件定义，

const Dropdown = ({ customclasses, ...otherProps }) => <div className={customclasses}></div>

或者，如果您不想更改className，您可以直接在div上传播...otherProps

const Dropdown = ({ yourprop, yourprop , ...otherProps }) => <div {...otherProps}></div>