用于生成内联的TailwindCSS类名的函数有时只工作(React, NextJS)

Question

我正在使用TailwindCSS样式的web应用程序。令人恼火的是，如果我想在:前和:后添加:pseudo -elements，我必须分别执行。

例如，我正在设计一个导航下拉按钮:

<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"])，但不允许伪元素(例如before:["block absolute bottom-2"])。

如果我要输入每个伪元素，这是单行的长度:

<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