loveuloveme

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

  •  
  •   loveuloveme · Nov 26, 2020 · 9130 views
    This topic created in 2175 days ago, the information mentioned may be changed or developed.

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

    Supplement 1  ·  Nov 26, 2020
    Tailwind 要和 AlpineJS 一起用,绝配。 多用用,你会爱上这个组合。
    30 replies  •  2021-02-18 05:16:37 +08:00
    coolcoffee
    coolcoffee
    Nov 26, 2020
    1
    楼主能解释一下我的疑惑吗?

    我觉得 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
    codermagefox
    Nov 26, 2020
    2
    @coolcoffee #1 因为本质依旧没有改变,就是糖,不过是糖好不好吃的区别罢了。
    尝试过 TailWind,后来又放弃了,原因很简单,有用,但没有必要。本质还是没有变。
    herozzm
    herozzm
    Nov 26, 2020 via Android
    3
    依靠无数个 css 的产生很长大冗余的 html ?
    seki
    seki
    Nov 26, 2020❤️1
    4
    @coolcoffee 一般是要配合组件化一起做的,到时候不是每个 card div 都有这么一堆 class,而是会有一个 card 组件,里面定义这么多 class,然后所有地方统一使用这个 card 组件,这样如果需要对 card 的外观进行修改,只需要修改 card 组件

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

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

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