tailwind 的错误使用方式

2021-01-10 14:04:47 +08:00
 Shook

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

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

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

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

@Jirajine 我希望能吸取它好的地方。
Hanser002
2021-01-11 11:47:10 +08:00
如果有使用 css 预处理器,可以按自己的需求生成类似的样式

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/743533

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX