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

请推荐和 TailwindCSS 配合的 UI 组件库

  •  
  •   Angela2022 · 2022-10-30 09:36:22 +08:00 · 10431 次点击
    这是一个创建于 516 天前的主题,其中的信息可能已经有所发展或是发生改变。

    请推荐能配合 TailwindCSS 的 UI 组件库, 要求:

    1. 组件样式能被 TailWindCSS 覆盖
    2. 组件库最好也是 Tailwind 写的
    3. 能配合 react
    4. 最好配 js 产生功能
    5. 组件库组件齐全
    6. 最好免费

    目前看了几个库, 都不好:

    1. headlessUI ---组件太少
    2. DaisyUI ---内置 css 类, 不能被 tailwind 覆盖, 定制差, 没有配 js
    3. TailWindUI ---收费
    4. materialUI -- 内置 css 类, 不能被 tailwind 覆盖,
    5. 其他 Tailwind UI 库 --组件少, 没有配 js

    谢谢!

    30 条回复    2023-05-24 16:54:51 +08:00
    estk
        1
    estk  
       2022-10-30 09:40:50 +08:00 via Android
    mui
    estk
        2
    estk  
       2022-10-30 09:42:53 +08:00 via Android
    我是 mui+tailwind
    至于你说的不能被覆盖?具体什么意思? mui 官方文档有教怎么配合 tailwind 使用,tailwind 官方文档也有教怎么配合 mui 使用
    liuzhaowei55
        3
    liuzhaowei55  
       2022-10-30 09:43:36 +08:00 via iPhone
    4 可以使用 base 库,自定义 css
    Angela2022
        4
    Angela2022  
    OP
       2022-10-30 09:51:08 +08:00
    @estk 请问: mui 的 styled 函数和 sx 属性都可以用 tailwind 在行内写代替吗, mui 的默认属性(如按钮的内边距)可以用 tailwind 行内 CSS 覆盖吗
    wbwm
        5
    wbwm  
       2022-10-30 09:52:10 +08:00   ❤️ 3
    yuezk
        6
    yuezk  
       2022-10-30 09:52:14 +08:00
    jisuowei
        7
    jisuowei  
       2022-10-30 09:52:19 +08:00
    blueprintjs
    estk
        8
    estk  
       2022-10-30 11:35:18 +08:00
    @Angela2022 #4
    这种我就直接用 styled 和 sx 了。tailwind 我主要用来更改 margin, padding, flex, font 等,比 css 简洁。因为离不开 mui ,又不像写复杂 css
    gzyguy
        9
    gzyguy  
       2022-10-30 11:40:58 +08:00
    gzyguy
        10
    gzyguy  
       2022-10-30 11:41:39 +08:00
    发现楼主已经贴了😓
    ragnaroks
        11
    ragnaroks  
       2022-10-30 13:36:14 +08:00
    原子类和封装组件本身就是天然冲突,除非组件刻意将 className 传递到内部元素。

    一般而言,使用 tailwindcss 不会考虑再加个组件库,纯手撸。
    mkfoy
        12
    mkfoy  
       2022-10-30 14:15:01 +08:00
    mkfoy
        13
    mkfoy  
       2022-10-30 14:17:46 +08:00
    haya
        14
    haya  
       2022-10-30 17:09:15 +08:00
    pengtikui
        15
    pengtikui  
       2022-10-30 18:22:35 +08:00
    qinrui
        16
    qinrui  
       2022-10-30 23:38:27 +08:00
    mdbootstrap
    liutao1998
        17
    liutao1998  
       2022-10-30 23:50:22 +08:00
    我用了 DaisiUI, 纯 css 用起来有点麻烦,每个组件包装了下,比较喜欢他的风格 , https://r.xjq.icu
    stimw
        18
    stimw  
       2022-10-31 00:05:50 +08:00 via iPhone
    我买了 tailwindui ,价格忘了,貌似人民币 700 多
    stimw
        19
    stimw  
       2022-10-31 00:09:44 +08:00
    https://github.com/react-component

    antd 有个无 ui 的组件库
    ysc3839
        20
    ysc3839  
       2022-10-31 05:38:24 +08:00 via Android
    @stimw 请问是如何购买的?为什么这么便宜?官网价格是 299 美元
    Mogeko
        21
    Mogeko  
       2022-10-31 06:23:33 +08:00 via iPhone
    目前搞得好的,免费开源的也就只有 DaisyUI👀
    stimw
        22
    stimw  
       2022-10-31 07:12:24 +08:00 via iPhone   ❤️ 1
    @ysc3839 发邮件求个折扣,学生或者收入不足多少美元打五六折好像
    likunyan
        23
    likunyan  
       2022-10-31 10:03:42 +08:00
    MUI 真的不错,简单。
    yanzhiling2001
        24
    yanzhiling2001  
       2022-10-31 10:47:43 +08:00
    @liutao1998 这个站点是开源改的还是 i 自己做的
    themiscloud
        25
    themiscloud  
       2022-10-31 11:39:30 +08:00
    react 的话用借鉴 tailwind 的 chakra-ui ,样式全搞成组件属性,写来舒服的一批
    beginor
        26
    beginor  
       2022-10-31 15:17:19 +08:00
    那你需要的是 bootstrap , 所有的 component 的属性都可以被它的 utility 覆盖
    ccyu220
        27
    ccyu220  
       2022-10-31 15:43:43 +08:00
    PrimeReact 完美契合
    liutao1998
        28
    liutao1998  
       2022-10-31 16:25:49 +08:00
    @yanzhiling2001 自己做的,里面用了很多开源的东西,比如组件用的 DaisyUI ,编辑器 monaco-editor
    waterskiing
        29
    waterskiing  
       2022-11-04 10:38:02 +08:00
    我感觉“不能 TailWindCSS 覆盖”这点有点难,我记得有个配置 pure 会把没有使用的 css 去掉,很多库都会配置吧。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2446 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 15:49 · PVG 23:49 · LAX 08:49 · JFK 11:49
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.