tailwind 的错误使用方式

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1414 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

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

tailwind

动效

Mixins

Responsive

4 条回复 • 2021-01-11 11:47:10 +08:00

oott123

2021-01-10 15:20:23 +08:00 via Android

把默认的那些样式（@tailwind base 啥的）拆到另一个文件里，或者干脆不引用

Jirajine

2021-01-10 15:33:51 +08:00 via Android

你既然不喜欢 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 预处理器，可以按自己的需求生成类似的样式