V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
loveuloveme
V2EX  ›  前端开发

是时候和 Bootstrap 说再见了,彻底拥抱 Tailwind 吧

  •  
  •   loveuloveme · 2020-11-26 12:15:54 +08:00 · 7485 次点击
    这是一个创建于 1457 天前的主题,其中的信息可能已经有所发展或是发生改变。

    Tailwind 一开始用,可能会觉得不方便,但是用的越多,会越觉得好,所有的代码,能复用。容易修改。容易自定义,简单。

    第 1 条附言  ·  2020-11-26 13:44:59 +08:00
    Tailwind 要和 AlpineJS 一起用,绝配。 多用用,你会爱上这个组合。
    30 条回复    2021-02-18 05:16:37 +08:00
    coolcoffee
        1
    coolcoffee  
       2020-11-26 12:34:28 +08:00
    楼主能解释一下我的疑惑吗?

    我觉得 Tailwind 相当于把 css 的每一条都放在 class 里面了,以为可以不用改 css 了,但是 html 变得更加难改了。

    想象一个 card,本来一个 class="card"就能表示,现在变成了了要: "w-9 h-9 flex items-center justify-center bg-gray-100 rounded-lg"。 如果那天 card 需要移除灰色 bg-gray-100,我难道还要全局替换?

    虽然有提供了 @apply 来聚合,但是这个和直接写 css item 好像没什么区别。
    codermagefox
        2
    codermagefox  
       2020-11-26 12:38:13 +08:00
    @coolcoffee #1 因为本质依旧没有改变,就是糖,不过是糖好不好吃的区别罢了。
    尝试过 TailWind,后来又放弃了,原因很简单,有用,但没有必要。本质还是没有变。
    herozzm
        3
    herozzm  
       2020-11-26 12:39:34 +08:00 via Android
    依靠无数个 css 的产生很长大冗余的 html ?
    seki
        4
    seki  
       2020-11-26 12:46:14 +08:00   ❤️ 1
    @coolcoffee 一般是要配合组件化一起做的,到时候不是每个 card div 都有这么一堆 class,而是会有一个 card 组件,里面定义这么多 class,然后所有地方统一使用这个 card 组件,这样如果需要对 card 的外观进行修改,只需要修改 card 组件

    https://tailwindcss.com/docs/extracting-components
    cmdOptionKana
        5
    cmdOptionKana  
       2020-11-26 12:51:20 +08:00
    其实这两个产品的目标用户不一样,bootstrap 主要给不是专业搞前端的人用,足够简单。

    Tailwind 适合更专业一些的人,方便定制。

    如果不是专门搞前端的,其实也没有定制的需求,因为会越改越丑,还不如用默认样式。
    damngood
        6
    damngood  
       2020-11-26 12:54:25 +08:00 via iPhone
    在两个小项目里面用过, 感觉还可以, 自己定制也还算方便. 就是 class 组合有点长, 不过放在变量里面就还好了.
    另外, vsc 里面 class 自动补全有时候不起作用, 也挺恼火.
    IsaacYoung
        7
    IsaacYoung  
       2020-11-26 13:01:07 +08:00
    不了不了
    gouflv
        8
    gouflv  
       2020-11-26 13:12:15 +08:00 via iPhone
    atom css 在工程实践中显然不合适,定位就短期项目快速开发
    loveuloveme
        9
    loveuloveme  
    OP
       2020-11-26 13:46:09 +08:00
    @coolcoffee 重复的放在一个组件里,比如,一个 card 多次使用,可以 <x-card />
    swift
        10
    swift  
       2020-11-26 14:02:31 +08:00 via iPhone   ❤️ 4
    🙅‍♂️<p style="font-size:12px;background:#333...>
    🙆‍♂️<p class="font-size-12 background-gray...>
    总是复古
    TangMonk
        11
    TangMonk  
       2020-11-26 14:06:33 +08:00 via iPhone
    还不错
    ztxcccc
        12
    ztxcccc  
       2020-11-26 14:07:57 +08:00
    这样的话为什么不直接写 style 呢?
    @swift
    swift
        13
    swift  
       2020-11-26 14:10:13 +08:00 via iPhone
    @ztxcccc
    所以我不用 Tailwind
    Troevil
        14
    Troevil  
       2020-11-26 14:10:22 +08:00
    要说语义化,当属 semantic ui , lz 可以看看 这是鼻祖
    xieqiang9408
        15
    xieqiang9408  
       2020-11-26 14:12:48 +08:00
    刚入坑,一次性的样式开发很快 , 响应式支持也很不错。
    zsc8917zsc
        16
    zsc8917zsc  
       2020-11-26 14:18:23 +08:00
    不是很懂,这个跟直接怼 style 有什么区别吗?
    go522000
        17
    go522000  
       2020-11-26 14:26:59 +08:00
    我的想法与楼主不一样,我主要还是用 bootstrap,再使用 tailwind 进行辅助,tailwind 画一个提示框,需要用到一堆样式。
    ztxcccc
        18
    ztxcccc  
       2020-11-26 14:32:40 +08:00
    @swift 合理
    love
        19
    love  
       2020-11-26 14:49:58 +08:00
    这个使用场景是什么?就象楼上说的,不用组件化的话难道在每个 card 都写一堆 class,修改的话要全局查找?用了第三方组件库那组件库都自带样式了还用这个干什么?
    难道是用于自己手撸的组件库?
    loveuloveme
        20
    loveuloveme  
    OP
       2020-11-26 15:17:14 +08:00
    @go522000 bootstrap 太大了。可以用 Tailwind 画个提示框,放入组件,然后 任何地方,甚至你任何项目,都可以 <x-alert> 不是很好吗
    jin5354
        21
    jin5354  
       2020-11-26 15:48:57 +08:00
    10 年前的 css 原子类写法。定位就是快速糊个页面出来。维护性什么的就别想了。
    november
        22
    november  
       2020-11-26 16:16:34 +08:00
    @seki 那我直接把那一堆的 class 的值整合为一个 class 为 card 的组件,不是更好?
    robinlovemaggie
        23
    robinlovemaggie  
       2020-11-26 16:37:01 +08:00
    前端过去现在将来都不会有统一标准,想怎么写就怎么写, 这才是前端该有的样子。
    zaul
        24
    zaul  
       2020-11-26 16:44:09 +08:00
    ....看着头皮发麻,一个 class 不香?
    dd0754
        25
    dd0754  
       2020-11-26 17:36:56 +08:00 via iPhone
    没什么卵用
    crystom
        26
    crystom  
       2020-11-26 18:28:56 +08:00
    @ztxcccc 据说这样的好处是颜色,字体大小等可以统一,比如通过配置规范整个网站就只有 4 种大小的文字,不会出现 N 多种 px 值
    chouchoui
        27
    chouchoui  
       2020-11-26 18:59:11 +08:00 via iPhone
    vue element tailwind 组合体验良好
    seki
        28
    seki  
       2020-11-26 20:01:32 +08:00
    @november 那当然是可以的,tailwind 的用法,和写一堆 less/scss 变量然后在某个 class 底下加样式,本质上没什么区别,但是要统一协调的话是 tailwind 这种不用重复写变量的容易做到一些
    sunorg
        29
    sunorg  
       2020-11-26 20:48:47 +08:00 via Android
    我选 bs5
    Carole
        30
    Carole  
       2021-02-18 05:16:37 +08:00
    还是喜欢原生 css
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2791 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 12:55 · PVG 20:55 · LAX 04:55 · JFK 07:55
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.