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

前端 tailwindcss 现在很火吗?

  •  
  •   Guidoo · 100 天前 · 3866 次点击
    这是一个创建于 100 天前的主题,其中的信息可能已经有所发展或是发生改变。

    有使用过老哥说说吗?说说使用感受。有什么坑吗?

    学习的话除了官网,还有什么途径?

    37 条回复    2022-05-09 13:22:14 +08:00
    damngoto
        1
    damngoto  
       100 天前
    这东西基本不需要学,想用就查。
    后端非常友好,非常虚浮。
    如果你喜欢 style in js ,那你会更喜欢 tailwind 。
    yuhangch
        2
    yuhangch  
       100 天前
    我不是前端,玩票形式用过
    感觉生态挺好的 next 、nuxt 这样的框架都有集成的例子
    对我(业余)来说加上 ide 的补全,调样式方便不少
    yaphets666
        3
    yaphets666  
       100 天前   ❤️ 1
    设计图就是不按照内置的那些类来 你有啥办法 所以在商业项目用处不大。自己玩是很好的。
    codefever
        4
    codefever  
       100 天前
    你会发现你甚至连 stylelint 都不需要配置,因为你可能根本不用写 css...
    wu67
        5
    wu67  
       100 天前
    个人看法: 如果写外包、写自营产品, 不用学. 除非项目里面已经有用这套一段时间了、或者是技术领导强行要求.

    实际上外包出页面, 只需要功能出来, 然后照着你用的 ui 框架的样式就行.
    自营项目, 设计稿压根就是自己发挥、天马行空, 你甚至没法直接套 ui 框架和各种 css 库, 都得自己微调.
    也就自已写的玩具项目能用上.
    anguiao
        6
    anguiao  
       100 天前
    学习成本其实很低,会 CSS 就会 Tailwind ,熟悉一下就可以轻松上手。
    其实 Tailwind 这种东西,写后台项目恰恰是最合适的。UI 框架的组件样式都是现成的,只需要完成布局,将它们组合在一起即可。Tailwind 写布局非常爽,几个 class 就可以解决问题,不需要再做无意义的命名。需要注意的是最好关闭 Tailwind 自带的 CSS 重置,以避免不必要的样式冲突。
    反而是样式定制化较强的前台页面,无论是覆盖组件库样式、还是从头开始写样式,都很容易把 class 列表写得很长。
    murmur
        7
    murmur  
       100 天前
    不用学?那么多定义怎么可能不用学,新人连 padding margin 这些都分不清楚你让他用哪个
    murmur
        8
    murmur  
       100 天前
    这个东西的用途就是在没有设计规范的公司让设计不至于太离谱,比如我设计 ml-4 ml-8 ml-16 ,其余的数不让用,那最多也就是这三种的组合

    但是你的设计师会只出 4 、8 、16 的设计稿吗
    Hanggi
        9
    Hanggi  
       100 天前
    应该说,如果熟悉 CSS ,不需要特意学太多东西就可以玩转 Tailwind 。

    其实这东西最早 Bootstrap 时期就已经在这么做了,很神奇这东西能这么火。
    Hyoban
        10
    Hyoban  
       100 天前   ❤️ 1
    Tailwind 的文档很棒,甚至可以通过 Tailwind 的文档来反学 css ,具体的查查 mdn 就好了
    terranboy
        11
    terranboy  
       100 天前
    @murmur 你应该没深入用过吧
    fkdog
        12
    fkdog  
       100 天前
    前端属实是把茴香豆有几种写法整出花活来了。
    zhwithsweet
        13
    zhwithsweet  
       100 天前
    我还是 unocss 吧
    Curtion
        14
    Curtion  
       100 天前
    原子化 css 比较火,不限于 tailwindcss
    zhwithsweet
        15
    zhwithsweet  
       100 天前
    Immortal
        16
    Immortal  
       100 天前
    其实早期合作过的有经验的前端同事在项目里就是"原子化"了
    把常用的 class 都提取出来
    tailwind 只是把这个操作做的更为标准而已
    Xcharles
        17
    Xcharles  
       100 天前   ❤️ 1
    很好用,最近在用 windicss ,楼上有人说不适合写自己的项目,可能没深入用过,单位是可以用 px 的
    YY
        18
    YY  
       100 天前
    看起来是不错
    aaniao002
        19
    aaniao002  
       100 天前 via Android
    太好了。正准备迁移,单位忽然说下一步大家一起跳 election
    huijiewei
        20
    huijiewei  
       100 天前
    研究下自己怎么写插件,简直神器了
    taowen
        21
    taowen  
       100 天前
    Dragonphy
        22
    Dragonphy  
       99 天前
    @Hyoban 我就是这么学的
    Leviathann
        23
    Leviathann  
       99 天前
    在用 配合 vite 不刷新+不切文件实时修改样式很爽
    zhuangzhuang1988
        24
    zhuangzhuang1988  
       99 天前
    累。
    kongkx
        25
    kongkx  
       99 天前 via iPhone
    咋一看学习成本不高。开始使用的时候很别扭,熟悉了之后能起飞。组件标准化之后,主题切换挺有优势,同样适合风格化开发。 那自由开放的设计稿,什么框架来都没用
    chenliangngng
        26
    chenliangngng  
       99 天前
    用过 3 个月吧,后面全部还原了

    个人认为这几个问题是死穴:
    1. 有 ui 框架这种东西,css 都不怎么需要写,现在有了 css 变量,连 less 这种都不怎么需要写了,tailwindcss 用起来很低频,这是最主要的原因
    2. 学习成本,包括团队学习成本,都不低
    3. 用起来相当于要把英文翻译成中文那样,在脑子里需要翻译 tailwindcss ,对日常开发来说,没有必要增加脑力负担
    4. 效率可能会降低。当你发现 tailwindcss 组合不了你想要的效果呢,再回去写 css ?时间都浪费了

    优点就是,如果新手前端学习这个,可以限制自己随便写的 css ,对控制 css 步长很有帮助
    tlerbao
        27
    tlerbao  
       99 天前 via iPhone
    @chenliangngng 我觉得你一点都没说对 还是再了解了解吧
    chenliangngng
        28
    chenliangngng  
       99 天前
    @tlerbao 你要反驳的话,每一条每一条说清楚。上面的是我用过 3 个月这就是我的感受,也请你把你的用后感写下来
    fgk
        29
    fgk  
       99 天前
    toB 项目的话可以说很爽了
    pokon548
        30
    pokon548  
       99 天前 via Android
    @chenliangngng
    1. 因人而异。适合自己的才是最好的。
    2. 对我来说,学习成本非常低。原子化的 CSS class 非常适合将我的 UI 抽象表述出来。
    3. 对于编程来说,我认为精通英语是一个最基本的要求。
    4. Tailwind 支持自定义 CSS Class 。自定义 CSS Class 可以写任意 CSS 语法。不清楚为何你认为无法组合出你想要的效果。
    pokon548
        31
    pokon548  
       99 天前 via Android
    补充一点:Tailwind 支持自定义样式。内置 CSS Class 写不出来的东西还能上原生 CSS ,非常方便。

    https://tailwindcss.com/docs/adding-custom-styles
    gogogo1203
        32
    gogogo1203  
       99 天前
    @chenliangngng
    1. 不清楚你在说什么. 既然 ui 都写好了不需要改了,难道还是 tailwind 的锅? “我吃饱了,所以锅很累赘’
    2. 什么东西没有学习成本? tailwind 的 naming 参照 bootstrap.
    3. 敲代码不需要带脑子吗?
    4. 你对 tailwind 是不是有什么误解? 别人是为了快速和方便。复杂的效果你可以用 css 啊, 你不是觉得 css 和 tailwind 只能选一个吧?

    上面的人真没有必要回复你, 因为你纯粹就是一知半解,尬黑
    Y29tL2gwd2Fy
        33
    Y29tL2gwd2Fy  
       98 天前 via Android
    @gogogo1203 你是 tailwind 懂王?我就觉得这个玩意的文档很恶心,还不如十几年前的 bootstrap 方便使用
    gogogo1203
        34
    gogogo1203  
       98 天前
    @Y29tL2gwd2Fy 哈哈, 我不要你觉得,要别人觉得. 我不是懂王,但是我知道大概率是你的毛病
    RickyC
        35
    RickyC  
       98 天前
    对对对, 很火, 但是很少看到有人用.
    gzf6
        36
    gzf6  
       98 天前 via Android
    如果你的团队能有一个好的规范且大家都能很好地遵守,那不妨试试,否则后期维护很麻烦
    ericgui
        37
    ericgui  
       98 天前
    如果有重复样式,怎么复用?

    而且我也不喜欢写太长的 class name

    结论就是:不用
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2905 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 38ms · UTC 12:07 · PVG 20:07 · LAX 05:07 · JFK 08:07
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.