关于 tailwindcss

[mokevip]

迫于给零散的样式起类名太累，开始搞自己的原子 css ，又迫于这方面每个人都有自己的习惯，干脆用 tailwindcss 做原子 css 方便规范

但是代码洁癖导致我遇到一些问题迟迟不能下手 = = 问问大家平时怎么使用的

1. 用 tailwindcss 后，本能的想摒弃分离的 style ，恨不得页面里只有类名没有 css ，但是遇到复杂的样式特别是只出现一次的复杂样式，还是一脸懵。。。 常见的比如宽度，使用 tailwind 会需要定义一下宽度选项，但是这玩意宽度我只用一次也定义么，可是又不甘心给他起个类名再去写他的 css ，也不利于整体性（大家都是 tailwindcss 就他一个需要翻到下面去看 css ） 。

2. 关于组件化，遇到单体复杂样式，比如自定义的 button ，是用类名抽离样式，还是用组件抽离样式。类名抽离简单、组件抽离稍微复杂，目前在想的是类名抽离样式和组件抽离只用一个 (这个问题其实是通用的)。

总结，目前设想：

1. 页面上再也没有 css ，tailwind.config 里对各种情况做冗余，哪怕只用一次

2. 目前还是类名抽离样式和组件抽离混用的，简单的无结构的类名抽离，复杂的块用组件抽离

[wu67]

自己的项目, 随便用都行, 甚至可以全靠 class.
公司 /团队的项目, 除非你们有一套非常严格的设计标准, 不然不可能的, 必定要写样式, 有时候甚至完全套不了框架 /库的样式...

[noe132]

w-[1337px] text-[#112233]

[ss098]

1. https://v2.tailwindcss.com/docs/just-in-time-mode#new-features

参考 Dynamic values 一节，可以使用 p-[4px] 这样的语法动态构造 class 。

2. 构建组件更通用，可以考虑结合 Headless UI 使用。

[helone]

如楼上所说其实也可以用动态的语法 p-[11px] bg-[#xxx]，我经常这么干 :doge

[retrocode]

经过我的大胆实践, 我个人觉得 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

你可以参考下

[retrocode]

@retrocode #5 主要是 tailwindcss 的类名普遍太长, 写多了看着也糟心=.= 还是按团队习惯自己配简写舒服

[ipwx]

@retrocode 你这种写法，项目大了就炸了。

[retrocode]

@ipwx #7 这个看习惯吧, 炸到不至于, 同时还要配合组件化使用的, 你之前遇到这种写法的哪些爆炸问题吗? 我填下坑

[helone]

@retrocode 你们等于是重复做了一个 tailwind 而已，简写舒服也只是造轮子的人自己舒服，其他人都要额外记，新人来了更需要额外记，如果用 tailwind ，找人的时候直接可以找合适人选，换了其他公司之后简写方案没有任何用处，如果其他公司用了 tailwind ，你还是要学 tailwind

[retrocode]

@helone #9 考虑到行业通用性的话, 那肯定是 tailwind 了, 我们这边是试着引入 tailwind, 结果最后写出来的 class 长的雅皮, 一堆配置下来, 还不如 scss 自己封装, 就去掉了, 这堆东西没有最佳实践的, 肯定是跟着团队走嘛, 不冲突

[zcf0508]

已经换 unocss 了，自己项目写得超爽

[jdi]

一步到位，学 unocss

[mokevip]

@ss098 好的，才发现有这个解决方式，谢谢！

[mokevip]

@retrocode 我之前也是这么写的，但是项目迭代多，不同的项目用到不同的类，最后有点乱了，所以想用 tailwind 来做一下规范

[mokevip]

@jdi
@zcf0508
之前好像没听说过，我研究一下哈哈

[zzl22100048]

学 unocss ，直接用 Attributify Mode ，避免超长 class