V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
Shook
V2EX  ›  问与答

tailwind 的错误使用方式

  •  
  •   Shook · 2021-01-10 14:04:47 +08:00 · 1590 次点击
    这是一个创建于 1195 天前的主题,其中的信息可能已经有所发展或是发生改变。

    看中了 tailwindCSS 的整合实力,感觉它在 responsive 、spacing 方面的方案是值得学习的。 但就是不喜欢 tailwind 把 class 当 style 写的感觉,于是引入到项目后,把它当做 mixins,疯狂把原本的样式改为 @apply

    结果是,每次保存编译,都需要十几秒甚至半分钟的时间。按 F5 刷新也要花费非常久的时间,甚至整个页面组件的异步加载都变得极为缓慢,各种动效也卡成 PPT 。

    我觉得我完全接触到了错误的 tailwind 使用方法,这样的表现是完全不值得的,浪费人生。 有什么办法优化吗?

    4 条回复    2021-01-11 11:47:10 +08:00
    oott123
        1
    oott123  
       2021-01-10 15:20:23 +08:00 via Android
    把默认的那些样式(@tailwind base 啥的)拆到另一个文件里,或者干脆不引用
    Jirajine
        2
    Jirajine  
       2021-01-10 15:33:51 +08:00 via Android
    你既然不喜欢 tailwind 的 atomic 理念,那不如直接用其他框架。
    Shook
        3
    Shook  
    OP
       2021-01-10 15:56:08 +08:00
    @oott123 一经点拨,我把 tailwind 的引用改成了这样:
    ```
    // main.js
    import 'tailwindcss/tailwind.css';
    ```
    完全顺滑了,而且客制化样式里的各种 @layer 也不受影响,theme extend 也正常,太棒了!

    @Jirajine 我希望能吸取它好的地方。
    Hanser002
        4
    Hanser002  
       2021-01-11 11:47:10 +08:00
    如果有使用 css 预处理器,可以按自己的需求生成类似的样式
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2897 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 02:48 · PVG 10:48 · LAX 19:48 · JFK 22:48
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.