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

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

This topic created in 785 days ago, the information mentioned may be changed or developed.

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

11 replies • 2024-04-20 13:51:11 +08:00

ericguo

Apr 17, 2024

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

musi

Apr 17, 2024

youtubbbbb

Apr 17, 2024

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

northquq

Apr 17, 2024

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

mooooooooooe

Apr 17, 2024

二楼正解

epiloguess

Apr 17, 2024

外面套个娃?

huijiewei

Apr 17, 2024

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

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

Pencillll

Apr 18, 2024 via Android

用 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

Apr 18, 2024

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

lawted

Apr 18, 2024

使用 shadcn 或者 headless ui

ericguo

Apr 20, 2024