mokevip

关于 tailwindcss

  •  
  •   mokevip ·
    moke8 · Jul 20, 2022 · 3335 views
    This topic created in 1471 days ago, the information mentioned may be changed or developed.

    迫于给零散的样式起类名太累,开始搞自己的原子 css ,又迫于这方面每个人都有自己的习惯,干脆用 tailwindcss 做原子 css 方便规范

    但是代码洁癖导致我遇到一些问题迟迟不能下手 = = 问问大家平时怎么使用的

    1. 用 tailwindcss 后,本能的想摒弃分离的 style ,恨不得页面里只有类名没有 css ,但是遇到复杂的样式特别是只出现一次的复杂样式,还是一脸懵。。。 常见的比如宽度,使用 tailwind 会需要定义一下宽度选项,但是这玩意宽度我只用一次也定义么,可是又不甘心给他起个类名再去写他的 css ,也不利于整体性(大家都是 tailwindcss 就他一个需要翻到下面去看 css ) 。

    2. 关于组件化,遇到单体复杂样式,比如自定义的 button ,是用类名抽离样式,还是用组件抽离样式。类名抽离简单、组件抽离稍微复杂,目前在想的是类名抽离样式和组件抽离只用一个 (这个问题其实是通用的)。

    总结,目前设想:

    1. 页面上再也没有 css ,tailwind.config 里对各种情况做冗余,哪怕只用一次

    2. 目前还是类名抽离样式和组件抽离混用的,简单的无结构的类名抽离,复杂的块用组件抽离

    16 replies    2022-07-20 22:54:05 +08:00
    wu67
        1
    wu67  
       Jul 20, 2022
    自己的项目, 随便用都行, 甚至可以全靠 class.
    公司 /团队的项目, 除非你们有一套非常严格的设计标准, 不然不可能的, 必定要写样式, 有时候甚至完全套不了框架 /库的样式...
    noe132
        2
    noe132  
       Jul 20, 2022
    w-[1337px] text-[#112233]
    ss098
        3
    ss098  
       Jul 20, 2022
    1. https://v2.tailwindcss.com/docs/just-in-time-mode#new-features

    参考 Dynamic values 一节,可以使用 p-[4px] 这样的语法动态构造 class 。

    2. 构建组件更通用,可以考虑结合 Headless UI 使用。
    helone
        4
    helone  
       Jul 20, 2022
    如楼上所说其实也可以用动态的语法 p-[11px] bg-[#xxx],我经常这么干 :doge
    cvooc
        5
    cvooc  
       Jul 20, 2022
    经过我的大胆实践, 我个人觉得 tailwindcss 现在都算重了,那堆配置看着就烦, 然后自己用 scss 做的原子 css, 现在在公司项目里应用, 原生 scss, 所以调整适配项目都极其方便,

    你说的样式抽离, scss 原生就有方案 @extend

    ```css
    .a{
    background-color: red;
    }
    .b{
    color: red;
    }
    .c{
    @extend .a,.b;
    }
    ```

    https://github.com/ShowMeBaby/tailwind-scss-mixin

    你可以参考下
    cvooc
        6
    cvooc  
       Jul 20, 2022
    @retrocode #5 主要是 tailwindcss 的类名普遍太长, 写多了看着也糟心=.= 还是按团队习惯自己配简写舒服
    ipwx
        7
    ipwx  
       Jul 20, 2022
    @retrocode 你这种写法,项目大了就炸了。
    cvooc
        8
    cvooc  
       Jul 20, 2022
    @ipwx #7 这个看习惯吧, 炸到不至于, 同时还要配合组件化使用的, 你之前遇到这种写法的哪些爆炸问题吗? 我填下坑
    helone
        9
    helone  
       Jul 20, 2022
    @retrocode 你们等于是重复做了一个 tailwind 而已,简写舒服也只是造轮子的人自己舒服,其他人都要额外记,新人来了更需要额外记,如果用 tailwind ,找人的时候直接可以找合适人选,换了其他公司之后简写方案没有任何用处,如果其他公司用了 tailwind ,你还是要学 tailwind
    cvooc
        10
    cvooc  
       Jul 20, 2022
    @helone #9 考虑到行业通用性的话, 那肯定是 tailwind 了, 我们这边是试着引入 tailwind, 结果最后写出来的 class 长的雅皮, 一堆配置下来, 还不如 scss 自己封装, 就去掉了, 这堆东西没有最佳实践的, 肯定是跟着团队走嘛, 不冲突
    zcf0508
        11
    zcf0508  
       Jul 20, 2022 via Android
    已经换 unocss 了,自己项目写得超爽
    jdi
        12
    jdi  
       Jul 20, 2022
    一步到位,学 unocss
    mokevip
        13
    mokevip  
    OP
       Jul 20, 2022
    @ss098 好的,才发现有这个解决方式,谢谢!
    mokevip
        14
    mokevip  
    OP
       Jul 20, 2022
    @retrocode 我之前也是这么写的,但是项目迭代多,不同的项目用到不同的类,最后有点乱了,所以想用 tailwind 来做一下规范
    mokevip
        15
    mokevip  
    OP
       Jul 20, 2022
    @jdi
    @zcf0508
    之前好像没听说过,我研究一下哈哈
    zzl22100048
        16
    zzl22100048  
       Jul 20, 2022 via iPhone
    学 unocss ,直接用 Attributify Mode ,避免超长 class
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   5756 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 50ms · UTC 02:30 · PVG 10:30 · LAX 19:30 · JFK 22:30
    ♥ Do have faith in what you're doing.