Nextjs + Tailwind 在无 class 或 className 属性的控件上如何应用 tailwind 的样式呢
devzhaoyou · 2024-04-17 14:59:05 +08:00 · 2463 次点击这是一个创建于 370 天前的主题，其中的信息可能已经有所发展或是发生改变。
如题，有些控件不能通过 class 或者 className, 如何应用 tailwind 的样式呢，如指定字体
 |
1
ericguo 2024-04-17 15:05:10 +08:00
二选一，要么不要用这样的控件（比如 AntD ），要么不要用 Tailwind 。
|
 |
2
musi 2024-04-17 15:24:07 +08:00
|
 |
3
youtubbbbb 2024-04-17 16:27:32 +08:00
可以用 useRef 通过操作 DOM 去加 class ，但是这种写法是不推荐的。
|
 |
4
northquq 2024-04-17 17:17:57 +08:00
@youtubbbbb 这种动态加的方法，不一定能被 tailwind 识别出来，导致编译后丢失 class 对应的样式吧
|
 |
5
mooooooooooe 2024-04-17 17:56:31 +08:00
二楼正解
|
 |
6
epiloguess 2024-04-17 19:34:43 +08:00
外面套个娃?
|
 |
7
huijiewei 2024-04-17 22:39:05 +08:00
|
 |
8
Pencillll 2024-04-18 04:35:45 +08:00 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 |
 |
9
devzhaoyou OP 感觉各位，验证一下各位的方案，感谢
|
 |
10
lawted 2024-04-18 10:52:19 +08:00
使用 shadcn 或者 headless ui
|
|
11
ericguo 2024-04-20 13:51:11 +08:00
|
Select Language