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

前端 tailwindcss 现在很火吗?

  •  
  •   Guidoo · 2022-05-07 16:34:45 +08:00 · 6390 次点击
    这是一个创建于 691 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

    但是你的设计师会只出 4 、8 、16 的设计稿吗
    Hanggi
        9
    Hanggi  
       2022-05-07 17:07:26 +08:00
    应该说,如果熟悉 CSS ,不需要特意学太多东西就可以玩转 Tailwind 。

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

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

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

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

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

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

    结论就是:不用
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   4875 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 38ms · UTC 01:11 · PVG 09:11 · LAX 18:11 · JFK 21:11
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.