这是一个创建于 855 天前的主题，其中的信息可能已经有所发展或是发生改变。
迫于给零散的样式起类名太累，开始搞自己的原子 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
retrocode 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
retrocode 2022-07-20 18:07:47 +08:00
@retrocode #5 主要是 tailwindcss 的类名普遍太长, 写多了看着也糟心=.= 还是按团队习惯自己配简写舒服
|
|
8
retrocode 2022-07-20 18:26:06 +08:00
@ipwx #7 这个看习惯吧, 炸到不至于, 同时还要配合组件化使用的, 你之前遇到这种写法的哪些爆炸问题吗? 我填下坑
|
|
9
helone 2022-07-20 18:33:04 +08:00
@retrocode 你们等于是重复做了一个 tailwind 而已，简写舒服也只是造轮子的人自己舒服，其他人都要额外记，新人来了更需要额外记，如果用 tailwind ，找人的时候直接可以找合适人选，换了其他公司之后简写方案没有任何用处，如果其他公司用了 tailwind ，你还是要学 tailwind
|
|
10
retrocode 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