如何使用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，则可以将...otherProps直接散布在div

上

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