V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
devzhaoyou
V2EX  ?  程序员

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

  •  
  •   devzhaoyou ·
    gezhaoyou · 20 天前 · 1659 次点击

    腾讯云最新优惠活动来了:云产品限时1折,云服务器低至88元/年 ,点击这里立即抢购:9i0i.cn/qcloud,更有2860元代金券免费领取,付款直接抵现金用,点击这里立即领取:9i0i.cn/qcloudquan

    (福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

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

    11 条回复  ?  2024-04-20 13:51:11 +08:00
    ericguo
        1
    ericguo  
       20 天前
    二选一,要么不要用这样的控件(比如 AntD ),要么不要用 Tailwind 。
    youtubbbbb
        3
    youtubbbbb  
       20 天前
    可以用 useRef 通过操作 DOM 去加 class ,但是这种写法是不推荐的。
    northquq
        4
    northquq  
       20 天前
    @youtubbbbb 这种动态加的方法,不一定能被 tailwind 识别出来,导致编译后丢失 class 对应的样式吧
    mooooooooooe
        5
    mooooooooooe  
       20 天前
    二楼正解
    epiloguess
        6
    epiloguess  
       20 天前
    外面套个娃?
    huijiewei
        7
    huijiewei  
       20 天前
    1. @apply 到他原来的 classname 上,容易造成冲突
    2. 套一层 div 用 * > 写,很麻烦。。

    结论就是用不成就不强用了
    Pencillll
        8
    Pencillll  
       20 天前 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
        9
    devzhaoyou  
    OP
       20 天前
    感觉各位,验证一下各位的方案,感谢
    lawted
        10
    lawted  
       20 天前
    使用 shadcn 或者 headless ui
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   6320 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 06:17 · PVG 14:17 · LAX 23:17 · JFK 02:17
    Developed with CodeLauncher
    ? Do have faith in what you're doing.


    http://www.vxiaotou.com