生成内联TailwindCSS classNames的函数有时只起作用(React，NextJS)。

Question

我正在使用TailwindCSS来设计一个web应用程序。烦人的是，如果我想在前面加上:psuedo元素之后，我必须单独做。

例如，我正在设置一个导航下拉按钮的样式：

<span className={'block relative border-2 w-full h-3 content-["test"]' + tagProps('before', ['block', 'absolute', 'top-2', 'border-2', 'w-full', 'h-0', 'content-[""]']) + tagProps('after', ['block', 'absolute', 'bottom-2', 'border-2', 'w-full', 'h-0', 'content-[""]'])}></span>

使用此功能：

const tagProps = (tag, prop) => {
let x = ' ';
for(const property of prop)
{
    x = x.concat(tag.concat(':').concat((property).concat(' ')));
}
return(x);

不管出于什么原因，风格只适用于完全的随机性。如果我关闭我的浏览器，关闭VSCode，并重新启动它，大约有25%的可能性，样式将适用。我为此使用了一个函数，因为无论出于什么原因，TailwindCSS允许方括号内的自定义属性(例如"content-"sample“)，但不允许对伪元素(例如：”块绝对底部-2“)这样做。

如果我要键入每个psuedo元素，这就是单行的长度：

<span className='block relative border-2 w-full h-3 content-["test"] before:block before:absolute before:top-2 before:border-2 before:w-full before:h-0 before:content-[""] after:block after:absolute after:top-2 after:border-2 after:w-full after:h-0 after:content-[""]'></span>

我觉得这很疯狂。我注意到的另一个恼人之处是，我不能让JSX语句多行(如果我使用这个函数来生成类名)。

这个图书馆怎么这么受欢迎？这比在nextjs中使用CSS模块更好吗？

我希望能就如何解决这个问题提出任何建议和建议。

Answer 1

“顺风”不会检测到动态类名

https://tailwindcss.com/docs/content-configuration#dynamic-class-names

可以使用安全列表为这样的场景生成类名。

https://tailwindcss.com/docs/content-configuration#safelisting-classes

学分转到@stickyuser