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

关于 tailwindcss

  •  
  •   mokevip ·
    moke8 · 2022-07-20 17:49:54 +08:00 · 2289 次点击
    这是一个创建于 617 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

    总结,目前设想:

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

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

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

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

    2. 构建组件更通用,可以考虑结合 Headless UI 使用。
    helone
        4
    helone  
       2022-07-20 18:01:24 +08:00
    如楼上所说其实也可以用动态的语法 p-[11px] bg-[#xxx],我经常这么干 :doge
    retrocode
        5
    retrocode  
       2022-07-20 18:06:08 +08:00
    经过我的大胆实践, 我个人觉得 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

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