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

突然感觉 tailwindcss 不香了

  •  1
     
  •   yuhangch ·
    yuhangch · 2023-11-24 10:13:36 +08:00 · 9648 次点击
    这是一个创建于 365 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

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

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

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

    关于 light/dark 转换,我推荐使用 unocss 因为 https://github.com/unpreset/unocss-preset-theme 这个 preset 可以让你无需使用 light: dark: 就可以完成暗色或其他主题适配
    bthulu
        2
    bthulu  
       2023-11-24 11:20:24 +08:00
    直接用行内样式 style=""不行嘛? 为什么非要用个 tailwindcss
    x86
        3
    x86  
       2023-11-24 11:21:23 +08:00
    @bthulu #2 tailwindcss 不就跟写 style 差不多,还方便点写个缩写就行
    anonydmer
        4
    anonydmer  
       2023-11-24 11:31:54 +08:00
    页面里面有一半的字符是 tw 的样式名称吧
    Hilong
        5
    Hilong  
       2023-11-24 11:38:02 +08:00
    可以按需加载的应该,是不是没有配置打包插件
    NXzCH8fP20468ML5
        6
    NXzCH8fP20468ML5  
       2023-11-24 11:51:41 +08:00 via Android
    压缩一下再看看大小
    ljpCN
        7
    ljpCN  
       2023-11-24 11:57:21 +08:00
    不用太在乎,开发体验很多时候就是跟极致的性能是冲突的。可以试试用 unocss 替代 tailwind 试试看,不过应该不会优化太多。
    zhwithsweet
        8
    zhwithsweet  
       2023-11-24 12:41:55 +08:00
    unocss ,给你一点小小的正则震撼
    linglingling
        9
    linglingling  
       2023-11-24 12:43:12 +08:00 via Android
    CSS 最拉胯了,以前不支持变量,现在支持了还要套个 var()。css in js 最香,压缩比打,变量灵活等各种优点,可惜生态没起来。
    jasonyang9
        10
    jasonyang9  
       2023-11-24 13:12:00 +08:00 via Android
    反正 utility-first 的概念有了你可以换更轻量的
    u3u
        11
    u3u  
       2023-11-24 13:31:13 +08:00   ❤️ 2
    @x86 差多了好吧 先不说编码效率,style 没法写复杂的选择器(:hover 等)以及移动端自适应媒体查询阁下如何应对?
    u3u
        12
    u3u  
       2023-11-24 13:39:50 +08:00
    @linglingling 以前也喜欢 CSS in JS ,因为很方便和灵活,后来发现页面性能太差,以及现在还不支持服务器组件了,慢慢的就会被抛弃,Mantine v7 已经改用 CSS Modules 了,纯 JS 复杂的交互组件用用还是可以的,SEO 页面组件可千万别用它,服务器组件需要尽可能的使用 CSS 实现简单的交互,并且将 CSS 和 JS 分离
    liuhuihao
        13
    liuhuihao  
       2023-11-24 13:42:09 +08:00
    这就是开发体验和性能的一种取舍喽,要是真的纠结那几十 kb 的大小,干脆什么框架啥的都不用直接手撸,那性能最好。
    dcoder
        14
    dcoder  
       2023-11-24 13:59:11 +08:00
    你这个是 tailwind 的问题,还是 astro 里使用 tailwind 的问题
    theprimone
        15
    theprimone  
       2023-11-24 13:59:16 +08:00
    这是 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  
       2023-11-24 13:59:49 +08:00
    试试 unocss
    dj721xHiAvbL11n0
        17
    dj721xHiAvbL11n0  
       2023-11-24 13:59:56 +08:00
    78 还可以接受哈哈哈,780 就不行了
    jydeng
        18
    jydeng  
       2023-11-24 14:02:17 +08:00
    可以过滤掉没有使用的 css ,正常来说体积很小,可以试试。
    freshgoose
        19
    freshgoose  
       2023-11-24 14:20:19 +08:00
    我是不太懂为啥要用 tailwind ,用 bootstrap 直接套用现成的模块不好吗
    Tyaqing
        20
    Tyaqing  
       2023-11-24 14:33:59 +08:00
    用 tw 后,html 变大是很正常的,我理解是不是 css 没有拆分出来,如果按照提示配置了,这个大小有可能是正常的。


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

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

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

    还是 btn-success 好理解好用
    murmur
        24
    murmur  
       2023-11-24 15:34:48 +08:00
    老板有个需求,要把所有按钮字号加大,我随手找到 btn 的定义 把 font-size 从 12 改成 14 ,齐活

    你 taiwind 怎么改,你根本没有 btn ,你的样式都是写内联 class 上的
    menuvb
        25
    menuvb  
       2023-11-24 15:39:19 +08:00   ❤️ 1
    一直使用 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  
       2023-11-24 15:44:47 +08:00
    @murmur

    学艺不精啊

    不是 text-lg 和 text-xl 之类的吗?然后在配置文件统一修改。。。
    retrocode
        27
    retrocode  
       2023-11-24 15:45:47 +08:00
    @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  
       2023-11-24 15:55:08 +08:00
    @freshgoose #19 bootstrap 还要记它那些类名, 而 tailwind 就是 style 的缩写, 大大提高了效率
    newaccount
        29
    newaccount  
       2023-11-24 15:57:14 +08:00   ❤️ 1
    开发阶段各种优化,上线后直接给我传了个 5MB 的 jpg
    淦!
    yuhangch
        30
    yuhangch  
    OP
       2023-11-24 16:00:57 +08:00
    @menuvb 不说 bootstrap, FastBootstrap 这个样式是真好看啊~
    NerbraskaGuy
        31
    NerbraskaGuy  
       2023-11-24 16:22:57 +08:00   ❤️ 1
    个人感觉 tailwindcss 更适合样式复用度高且版本迭代改动小的项目,还有就是有些客串前端很烦花时间写 CSS 的,反正我挺反感标签里面类名长的不行的写法
    murmur
        32
    murmur  
       2023-11-24 16:29:12 +08:00
    @encro 例子里的领导的要求是按钮字号放大一号,不是把大字体放大一号

    @menuvb 有一个网站叫 wrapbootstrap ,各种基于 bootstrap 的主题,都学会折腾 tailwind 了,怎么也知道不应该随便造轮子,得看看有没有更好的封装吧
    murmur
        33
    murmur  
       2023-11-24 16:33:03 +08:00
    @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  
       2023-11-24 16:40:46 +08:00   ❤️ 8
    我建议是没整体用过的 tailwindcss/windicss/unocss 的人不要出来发表高见了,说出来的东西都丢人。
    我寻思用了 tailwindcss/windicss/unocss 也没有不让用自己写 css/sass/less 啊,更何况 @apply 都不知道还出来叫什么叫。
    还有说为什么不直接写在内联 style 里面,我想看看大佬怎么在内联里面写 hover 、响应式、上面三个库基础操作的 space / divide
    abelmakihara
        35
    abelmakihara  
       2023-11-24 16:41:32 +08:00
    没香过 哪有那么多写行内样式的情况
    如果不是写行内样式用 那改起来想想都可怕
    维护一份项目常用的类代替就行了
    murmur
        36
    murmur  
       2023-11-24 16:43:41 +08:00
    @chouchoui 有 ide 提示的 css 很好写,你都 apply 了我干啥不自己手写啊,想写多少 px 写多少,想用什么颜色用什么

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

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

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

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

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