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

突然感觉 tailwindcss 不香了

  •  1
     
  •   yuhangch ·
    yuhangch · 98 天前 · 8022 次点击
    这是一个创建于 98 天前的主题,其中的信息可能已经有所发展或是发生改变。

    用 astro 做了一个静态网站,内容主要是文字为主。

    当时用 tw 的时候是提高生产力为主,比如 light/dark 转换,prose 排版等等。

    现在功能基本完成,想做一些优化的时候,发现某篇文章的 index.html:

    总大小 ~ 78kb ,移除 tw 声明的变量和 class 定义之后 大小只有~ 24kb 。。。

    尝试用 purgecss ,作用不是很明显(可能姿势不对)?

    除此之外大家还有啥建议不,前端不是很在行,所以也想请教一下,使用 tw 的话,每个静态页面中的 css 是根据这个页面的样式类的使用情况生成的,还是所有页面的 css 是一样的?

    第 1 条附言  ·  97 天前
    谢谢大家,接受几个朋友的建议,用了用 unocss ,迁移起来没啥成本,首先是不用再自己操心 purge 了,其次 SSR 用‘per-module’好像也解决了。。

    意外之喜是打包速度还快了不少。。
    59 条回复    2024-02-04 08:11:28 +08:00
    dengqing
        1
    dengqing  
       98 天前
    按我的理解像 astro 这种 SSG 的每个页面都是分开的

    关于 light/dark 转换,我推荐使用 unocss 因为 https://github.com/unpreset/unocss-preset-theme 这个 preset 可以让你无需使用 light: dark: 就可以完成暗色或其他主题适配
    bthulu
        2
    bthulu  
       98 天前
    直接用行内样式 style=""不行嘛? 为什么非要用个 tailwindcss
    x86
        3
    x86  
       98 天前
    @bthulu #2 tailwindcss 不就跟写 style 差不多,还方便点写个缩写就行
    anonydmer
        4
    anonydmer  
       98 天前
    页面里面有一半的字符是 tw 的样式名称吧
    Hilong
        5
    Hilong  
       98 天前
    可以按需加载的应该,是不是没有配置打包插件
    xxfye
        6
    xxfye  
       98 天前 via Android
    压缩一下再看看大小
    ljpCN
        7
    ljpCN  
       98 天前
    不用太在乎,开发体验很多时候就是跟极致的性能是冲突的。可以试试用 unocss 替代 tailwind 试试看,不过应该不会优化太多。
    zhwithsweet
        8
    zhwithsweet  
       98 天前
    unocss ,给你一点小小的正则震撼
    linglingling
        9
    linglingling  
       98 天前 via Android
    CSS 最拉胯了,以前不支持变量,现在支持了还要套个 var()。css in js 最香,压缩比打,变量灵活等各种优点,可惜生态没起来。
    jasonyang9
        10
    jasonyang9  
       98 天前 via Android
    反正 utility-first 的概念有了你可以换更轻量的
    u3u
        11
    u3u  
       98 天前   ❤️ 2
    @x86 差多了好吧 先不说编码效率,style 没法写复杂的选择器(:hover 等)以及移动端自适应媒体查询阁下如何应对?
    u3u
        12
    u3u  
       98 天前
    @linglingling 以前也喜欢 CSS in JS ,因为很方便和灵活,后来发现页面性能太差,以及现在还不支持服务器组件了,慢慢的就会被抛弃,Mantine v7 已经改用 CSS Modules 了,纯 JS 复杂的交互组件用用还是可以的,SEO 页面组件可千万别用它,服务器组件需要尽可能的使用 CSS 实现简单的交互,并且将 CSS 和 JS 分离
    liuhuihao
        13
    liuhuihao  
       98 天前
    这就是开发体验和性能的一种取舍喽,要是真的纠结那几十 kb 的大小,干脆什么框架啥的都不用直接手撸,那性能最好。
    dcoder
        14
    dcoder  
       98 天前
    你这个是 tailwind 的问题,还是 astro 里使用 tailwind 的问题
    theprimone
        15
    theprimone  
       98 天前
    这是 tailwind 还不支持按需加载 CSS ,所有的 CSS 都是打包成一个文件的,现在还有个可以通过 CSS 使用 SVG 图标的方案,图标多了 CSS 体积也是直接爆炸。最好是实现根据页面加载 CSS ,这样就很完美了,不过这个难度有点大,除了自身框架支持,结合其他应用框架也是个问题。

    tailwind 毕竟只是基于 postcss 的插件,unocss 还没用过,不过它是基于 unplugin ,灵活性大得多,刚才看了一下,在 Vite 下有个两个特殊的模式:per-module / dist-chunk https://unocss.dev/integrations/vite#per-module-experimental 看起来已经在做这方面的尝试了?
    ymlog
        16
    ymlog  
       98 天前
    试试 unocss
    x2420390517
        17
    x2420390517  
       98 天前
    78 还可以接受哈哈哈,780 就不行了
    jydeng
        18
    jydeng  
       98 天前
    可以过滤掉没有使用的 css ,正常来说体积很小,可以试试。
    freshgoose
        19
    freshgoose  
       98 天前
    我是不太懂为啥要用 tailwind ,用 bootstrap 直接套用现成的模块不好吗
    Tyaqing
        20
    Tyaqing  
       98 天前
    用 tw 后,html 变大是很正常的,我理解是不是 css 没有拆分出来,如果按照提示配置了,这个大小有可能是正常的。


    然后不用担心 html 大小,tw 的样式 class 重复率很高,http2 请求的 Huffman 压缩效果会更好,压缩后的 html 也会很小
    a4854857
        21
    a4854857  
       98 天前
    对于犹豫为啥不直接 style 的.我以前也这么想.后来发现 tailwind 真的太爽了.虽然我现在用的是 unocss
    crazyTanuki
        22
    crazyTanuki  
       98 天前
    这么极致追求,我觉得 tailwind 还能凑合用
    murmur
        23
    murmur  
       97 天前
    @freshgoose 为了增加维护难度呗,总有人吹牛逼说什么 tailwind 好记忆,我笑了,css3 年代还记不住真得反省下自己是不是菜了

    不会写 css 的,用 antd element 直接套组件上来人家全给你写好,都不用管也不会太难看
    会写 css 的 啥都能自己定义 也不会用 tailwind

    这东西动动脑子都能想起来 是 width-100 fontsize-14 color-black background-green 一堆乱七八糟好理解

    还是 btn-success 好理解好用
    murmur
        24
    murmur  
       97 天前
    老板有个需求,要把所有按钮字号加大,我随手找到 btn 的定义 把 font-size 从 12 改成 14 ,齐活

    你 taiwind 怎么改,你根本没有 btn ,你的样式都是写内联 class 上的
    menuvb
        25
    menuvb  
       97 天前
    一直使用 Bootstrap ,但是它的默认的配色一言难尽,每次都要重新配色,另一个缺点就是缺少更多样性的 CSS Utilities ,特别是针对 Margin ,Padding 的间距,最长间距就到 2rem ,所以经常一层套一层才能达到自己要的效果,在 CSS Utilities 这一点又喜欢 TailwindCSS 的设计理念

    楼主可以试试 FastBootstrap ,做为 Bootstrap 皮肤,可以作为完美的的替代,Atlassian Design 设计,结合 TailwindCSS 的 CSS Utilities first 特点,light/dark 二种颜色模式,最终目的就是尽量避免在自己写 CSS 。

    官网介绍: https://fastbootstrap.com/

    Github: https://github.com/fastbootstrap/atlassian-design-for-bootstrap
    encro
        26
    encro  
       97 天前
    @murmur

    学艺不精啊

    不是 text-lg 和 text-xl 之类的吗?然后在配置文件统一修改。。。
    retrocode
        27
    retrocode  
       97 天前
    @murmur #24 这个例子不对, 现在使用组件基本都是自行封装一层 xxx-button 之类的再使用了, 在这点上 统一是修改, 直接在单个组件上改 className 也是一样的, 问题出现在全局样式上, 对于存在结构的 css, 例如: xxx-card, xxx-card-left, xxx-card-disable 类的样式, 在后期结构有变动的情况下, class 会越写越乱.
    我是自己封装了一个全局 sass 库, 注册了一些 flex/flex-center/w-100 之类的无业务 class
    tailwind 最恶心的是 class 越写越长, 自己封装反而更方便无侵入, 比如我是直接把通用 border 封装成 .b class, 唯一缺点就是需要记忆缩写, 对新接手的不友好, 不过整个项目都这么使用的情况下, 常用 class 也没多少, 熟悉几天就好了
    weijancc
        28
    weijancc  
       97 天前
    @freshgoose #19 bootstrap 还要记它那些类名, 而 tailwind 就是 style 的缩写, 大大提高了效率
    newaccount
        29
    newaccount  
       97 天前   ❤️ 1
    开发阶段各种优化,上线后直接给我传了个 5MB 的 jpg
    淦!
    yuhangch
        30
    yuhangch  
    OP
       97 天前
    @menuvb 不说 bootstrap, FastBootstrap 这个样式是真好看啊~
    NerbraskaGuy
        31
    NerbraskaGuy  
       97 天前   ❤️ 1
    个人感觉 tailwindcss 更适合样式复用度高且版本迭代改动小的项目,还有就是有些客串前端很烦花时间写 CSS 的,反正我挺反感标签里面类名长的不行的写法
    murmur
        32
    murmur  
       97 天前
    @encro 例子里的领导的要求是按钮字号放大一号,不是把大字体放大一号

    @menuvb 有一个网站叫 wrapbootstrap ,各种基于 bootstrap 的主题,都学会折腾 tailwind 了,怎么也知道不应该随便造轮子,得看看有没有更好的封装吧
    murmur
        33
    murmur  
       97 天前
    @retrocode 按 style 封装 我可以定义
    .btn-warning{} .btn-success{} .btn-alert{} 这些都是直接配出来的 写一个
    :class={[props.type]: true}就可以搞定

    如果是基于 tailwind 封装,就会写出
    :class={color-red: props.type === 'alert', color-green: props.type === 'success'}这样的丑陋写法
    chouchoui
        34
    chouchoui  
       97 天前   ❤️ 8
    我建议是没整体用过的 tailwindcss/windicss/unocss 的人不要出来发表高见了,说出来的东西都丢人。
    我寻思用了 tailwindcss/windicss/unocss 也没有不让用自己写 css/sass/less 啊,更何况 @apply 都不知道还出来叫什么叫。
    还有说为什么不直接写在内联 style 里面,我想看看大佬怎么在内联里面写 hover 、响应式、上面三个库基础操作的 space / divide
    abelmakihara
        35
    abelmakihara  
       97 天前
    没香过 哪有那么多写行内样式的情况
    如果不是写行内样式用 那改起来想想都可怕
    维护一份项目常用的类代替就行了
    murmur
        36
    murmur  
       97 天前
    @chouchoui 有 ide 提示的 css 很好写,你都 apply 了我干啥不自己手写啊,想写多少 px 写多少,想用什么颜色用什么

    我感觉上面有个说的很好,tailwind 必须有严格的设计标准,就那几个颜色和尺寸,随心所欲还是手写的舒服
    retrocode
        37
    retrocode  
       97 天前
    @murmur #33 是的 就这点恶心, 我也是这么搞的, 不过我是自行封装的 sass
    liuhuihao
        38
    liuhuihao  
       97 天前
    @murmur #36 tailwind 有严格的设计标准用起来最舒服。就算没有严格的设计标准它也提供了 w-[5px] 这种写法
    liuhuihao
        39
    liuhuihao  
       97 天前
    @murmur #36 至于上面你举得 btn 的例子,tw 文档里面说了 这种复用的情况应将 btn 拆成一个组件。包括为什么不直接内联,文档上也都有说明。
    https://www.tailwindcss.cn/docs/utility-first#maintainability-concerns
    jguo
        40
    jguo  
       97 天前
    能不能别强行讨论不了解的东西,但凡看过五分钟文档也该知道 tailwind 跟 style 的区别
    zhwithsweet
        41
    zhwithsweet  
       97 天前
    @murmur #33 在 unocss/ tailwindcss 中 你这种情况,我个人认为封装为 data-[type=alert]:text-red 比较好
    dufu1991
        42
    dufu1991  
       97 天前
    既然使用了 astro 这种方案,建议不要把单页的 CSS 放在一个文件内,而是全站的 CSS 放一起,这样全站来看可能会大一点,但是用户加载一次 CSS 之后就从缓存拿,全站就一个 CSS 文件才是使用 Tailwind 的正确方式。你全站代码量再大,CSS 增量不会大,越到后期 CSS 文件大小越是趋于稳定。
    xinmans
        43
    xinmans  
       97 天前 via iPhone
    我也很喜欢 astro 这种方案
    duan602728596
        44
    duan602728596  
       97 天前 via iPhone
    上完 br 压缩也没大多少
    Track13
        45
    Track13  
       97 天前 via Android
    @newaccount 确实,视频封面图居然穿了个 gif 是我没想到的😂
    DOLLOR
        46
    DOLLOR  
       97 天前
    在我看来,tailwindcss 和 inline style 的区别就是前者要再装个插件才能有提示,后者 vscode 就自带提示了。
    对我来说,vscode 跑的插件已经够多了,能少装一个就尽量少装一个。

    而且现在的三大浏览器都实现原生 CSS 的嵌套语法了,连 sass 、less 的必要性都降低了许多。
    zangbianxuegu
        47
    zangbianxuegu  
       97 天前
    感觉这个 CSS 应该是可以优化的
    mokeyjay
        48
    mokeyjay  
       97 天前
    @murmur #24 不建议云用户随意点评,实际上 tw 有 @apply 语法,一样可以封装出你所说的 .btn-success 。另外,tw 还支持通过配置文件调整各种变量,统一改个字号很简单
    menuvb
        49
    menuvb  
       97 天前
    @yuhangch 10 多年 Bootstrap 的样式受害者,从 2.0 就开始,最早入坑就是 12-column 的 Grid 布局。就想有一套又好看的,又有强大 utilities-first 的 CSS 作为以后项目使用,避免在自己在写 CSS ,我是真讨厌在项目还要写 CSS ,即使一行都不行。
    otakustay
        50
    otakustay  
       97 天前
    tailwindcss 将会是大模型最友好的页面编写技术了,以的不想用也得用
    tushan
        51
    tushan  
       97 天前
    tailwind 有两种引入方式,你可以选择 js 的引入,他是动态生成 css 的,这样就不需要引入他的那个很大的编译好的 css ,还有一种就是 webpack 的方式的了。
    IvanLi127
        52
    IvanLi127  
       97 天前 via Android
    @murmur 想要 btn ,自己包一层就有了,这个看你怎么用 TailwindCSS 。用法很灵活,深入学学你会发现新天地。
    twelvechen
        53
    twelvechen  
       97 天前 via iPhone
    我当初用 tailwind 的目的很单纯,就是不想起类名🤣,以前自己维护 css 各种 xxx-wrapper xxx-content xxx-text ,明明 css 代码一瞬间就想出来了,取名字总是打断思路。
    然后最近发现 tailwind 这种对 code review 相对友好,css 类名的方案 review 的时候得在 html 和 css 代码间来回跳,需要在脑子里维护一套 html 结构再看 css 。tailwind 方案结构和样式代码就在一块,能少很多负担。
    murmur
        54
    murmur  
       95 天前
    @mokeyjay 你说的变量这些用 css+预处理工具一样可以做到,而且你根本没懂得我的重点,如果一个人会写 css ,那手写 css 比 tainwind 要自由的多,一个人不会 css ,你给他换个词他也记不住,甚至他根本不会用 tailwind ,element-ui 或者 ant 一把梭不香么
    murmur
        55
    murmur  
       95 天前
    很多人忘了一点是 css 是前端基础必修的,tailwind 这种属于异类,增加心智负担的东西
    mokeyjay
        56
    mokeyjay  
       95 天前
    @murmur #54 当然是为了图省事啊,能少敲很多字符,做自适应和暗色模式之类的也更方便等等。谁不知道原生手写最自由呢,用第三方的东西不就为了图省事吗
    stimw
        57
    stimw  
       26 天前 via Android
    @murmur 一个新出现的工具得以迅速流行并且火爆到现在这个地步( 2013 年前端/js 领域获 star 最多的是一个叫 shadcn 的 tailwind ui 库),为什么会把它喷得《一无是处》?

    又不是 java8 这种纯粹因为历史包袱而被广泛使用的东西,一个新玩意的流行必然是因为好用,大伙爱用。

    当然不是每一个人都喜欢这个方式,也不是每一个项目都适合,但是你写的大部分理由其实都是没有好好看过文档里开头几篇文章,没有真正在项目里尝试深入使用和接触它的生态,这才是评论的前提。

    无脑吹和无脑黑都是不对的。
    stimw
        58
    stimw  
       26 天前 via Android
    @murmur 打错,2023 年
    murmur
        59
    murmur  
       26 天前
    @stimw 前端娱乐圈,你看看就好了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5361 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 07:10 · PVG 15:10 · LAX 23:10 · JFK 02:10
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.