Nextjs + Tailwind 在无 class 或 className 属性的控件上如何应用 tailwind 的样式呢

[devzhaoyou]

如题，有些控件不能通过 class 或者 className, 如何应用 tailwind 的样式呢，如指定字体

[ericguo]

二选一，要么不要用这样的控件（比如 AntD ），要么不要用 Tailwind 。

[musi]

https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply

[youtubbbbb]

可以用 useRef 通过操作 DOM 去加 class ，但是这种写法是不推荐的。

[northquq]

@youtubbbbb 这种动态加的方法，不一定能被 tailwind 识别出来，导致编译后丢失 class 对应的样式吧

[mooooooooooe]

二楼正解

[epiloguess]

外面套个娃?

[huijiewei]

1. @apply 到他原来的 classname 上，容易造成冲突
2. 套一层 div 用 * > 写，很麻烦。。

结论就是用不成就不强用了

[Pencillll]

用 arbitrary variants 就行了，在控件外面的父元素写个 class ，比如：
[&_.xxx]:font-sans
[&>div>span]:font-sans
[&_*]:!font-sans

参考： https://tailwindcss.com/docs/hover-focus-and-other-states#using-arbitrary-variants

[devzhaoyou]

感觉各位，验证一下各位的方案，感谢

[lawted]

使用 shadcn 或者 headless ui

[ericguo]

@mooooooooooe apply 不是正解： https://www.reddit.com/r/tailwindcss/comments/x4kqwd/how_to_avoid_using_apply_directive_by_using/