这是一个创建于 1259 天前的主题，其中的信息可能已经有所发展或是发生改变。
迫于给零散的式起类名太累，开始搞自己的原子 css ，又迫于这方面每个人都有自己的习惯，干脆用 tailwindcss 做原子 css 方便规范
但是代码洁癖导致我遇到一些问题迟迟不能下手 = = 问问大家平时怎么使用的
-
用 tailwindcss 后，本能的想摒弃分离的 style ，恨不得页面里只有类名没有 css ，但是遇到复杂的样式特别是只出现一次的复杂样式，还是一脸懵。。。 常见的比如宽度，使用 tailwind 会需要定义一下宽度选项，但是这玩意宽度我只用一次也定义么，可是又不甘心给他起个类名再去写他的 css ，也不利于整体性（大家都是 tailwindcss 就他一个需要翻到下面去看 css ） 。
-
关于组件化，遇到单体复杂样式，比如自定义的 button ，是用类名抽离样式，还是用组件抽离样式。类名抽离简单、组件抽离稍微复杂，目前在想的是类名抽离样式和组件抽离只用一个 (这个问题其实是通用的)。
总结，目前设想：
-
页面上再也没有 css ，tailwind.config 里对各种情况做冗余，哪怕只用一次
-
目前还是类名抽离样式和组件抽离混用的，简单的无结构的类名抽离，复杂的块用组件抽离
 | 1 wu67 2022-07-20 17:57:00 +08:00 自己的项目, 随便用都行, 甚至可以全靠 class. 公司 /团队的项目, 除非你们有一套非常严格的设计标准, 不然不可能的, 必定要写样式, 有时候甚至完全套不了框架 /库的样式... |
 | 2 noe132 2022-07-20 17:58:50 +08:00 w-[1337px] text-[#112233] |
 | 3 ss098 2022-07-20 17:59:01 +08:00 1. https://v2.tailwindcss.com/docs/just-in-time-mode#new-features 参考 Dynamic values 一节，可以使用 p-[4px] 这样的语法动态构造 class 。 2. 构建组件更通用，可以考虑结合 Headless UI 使用。 |
 | 4 helone 2022-07-20 18:01:24 +08:00 如楼上所说其实也可以用动态的语法 p-[11px] bg-[#xxx]，我经常这么干 :doge |
 | 5 cvooc 2022-07-20 18:06:08 +08:00 经过我的大胆实践, 我个人觉得 tailwindcss 现在都算重了,那堆配置看着就烦, 然后自己用 scss 做的原子 css, 现在在公司项目里应用, 原生 scss, 所以调整适配项目都极其方便, 你说的样式抽离, scss 原生就有方案 @extend ```css .a{ background-color: red; } .b{ color: red; } .c{ @extend .a,.b; } ``` https://github.com/ShowMeBaby/tailwind-scss-mixin 你可以参考下 |
| 6 cvooc 2022-07-20 18:07:47 +08:00 @retrocode #5 主要是 tailwindcss 的类名普遍太长, 写多了看着也糟心=.= 还是按团队习惯自己配简写舒服 |
| 9 helone 2022-07-20 18:33:04 +08:00 @retrocode 你们等于是重复做了一个 tailwind 而已，简写舒服也只是造轮子的人自己舒服，其他人都要额外记，新人来了更需要额外记，如果用 tailwind ，找人的时候直接可以找合适人选，换了其他公司之后简写方案没有任何用处，如果其他公司用了 tailwind ，你还是要学 tailwind |
| 10 cvooc 2022-07-20 18:37:59 +08:00 @helone #9 考虑到行业通用性的话, 那肯定是 tailwind 了, 我们这边是试着引入 tailwind, 结果最后写出来的 class 长的雅皮, 一堆配置下来, 还不如 scss 自己封装, 就去掉了, 这堆东西没有最佳实践的, 肯定是跟着团队走嘛, 不冲突 |
 | 11 zcf0508 2022-07-20 19:19:53 +08:00 via Android 已经换 unocss 了，自己项目写得超爽 |
 | 12 jdi 2022-07-20 19:20:41 +08:00 一步到位，学 unocss |
 | 14 mokevip OP @retrocode 我之前也是这么写的，但是项目迭代多，不同的项目用到不同的类，最后有点乱了，所以想用 tailwind 来做一下规范 |
 | 16 zzl22100048 2022-07-20 22:54:05 +08:00 via iPhone 学 unocss ，直接用 Attributify Mode ，避免超长 class |
Select Language