看着满屏的样式写在 html 上就头疼
点开 devtools element 想找个节点都难找
生僻一点的样式就还得去翻下文档
所以这玩意儿为啥有人喜欢用啊
点开 devtools element 想找个节点都难找
生僻一点的样式就还得去翻下文档
所以这玩意儿为啥有人喜欢用啊
 |
2
bojackhorseman 16 天前
好用 爱用
|
 |
3
ipwx 16 天前
AI 用 tailwind 很厉害，生成效果比 vue 的 scoped style 准多了。所以我最近开始用了。
|
 |
4
wednesdayco OP @ramcasky 用 apply 跟我手写手多少区别
|
 |
5
elevioux 16 天前
不用 tailwind 。感觉就是 inline style ？
|
 |
6
liudewa 16 天前
6 年前端 爱用 用完根本离不开
|
 |
8
ramcasky 16 天前
@wednesdayco 区别就是你哼哧哼哧撸了半天 我这边几个样式名写一下就好了 这效率肯定不是一个层次的，而且不是所有都是复杂的 css,简单直接用内置的原子样式就好了,你说为什么有人喜欢用 我说因为提高了效率 简洁美观
|
 |
10
craftsmanship 16 天前 via Android  1
不喜欢 还是喜欢纯手撸 精确到像素级 CSS 相比传统意义上的编程 更像是种艺术
但现在 AI 时代都不提倡手工编码了 所以得看写代码的目的是什么 如果是搬砖 那咋效率高咋来 显然 AI 很喜欢 tw 如果是为了通过编程来取得心理上的愉悦 那肯定要自己写 用最符合自己口味的语言 用最骚的奇技淫巧 写最花里胡哨的代码 同时补充最详细的注释 解释清楚工程来讲怎么写才合适 主打一个虽然没啥卵用 但是我能写得出来 的自我满足感 |
 |
11
zidian 16 天前 1
真的，tailwind 也不拦着你自己定义 class
|
 |
12
BigPiggggg 16 天前 1
在 html 中写大量的 css 就像拉屎，看过去密密麻麻的密恐都犯了，写一些基础的就行了比如边距、大小啥的，复杂的 css 还是建议单独提出来
|
 |
13
flydogs 16 天前
省时省力，挺好的。
|
 |
14
cat 16 天前 2
这两年喜欢用 tailwindcss 纯粹是不喜欢起类名
PS. 自认为手写 css 的功底不算差，曾经用 css 手撸一把尤克里里 |
 |
15
c3de3f21 16 天前
敝人是这样理解的，达到目的就行，手段可以只有一种，也可以有很多种。学一些东西并不是因为要使用它，可能是为了能看别人写的看个大概。
|
 |
16
Chrisssss 16 天前
@craftsmanship 搬砖也搬出艺术来了？
|
|
17
craftsmanship 16 天前 via Android
@Chrisssss 仔细审题
|
 |
18
yangth 16 天前
代价是污染 html 结构，类似 vue 的框架花了大力气精简开发阶段的模板，组件封装，自定义接口，结果你们一朝回到解放前，往上面加一堆东西，建议以后把 js 代码也搬到 html 里面去，来一个 html 、css 、js 合家欢
|
 |
19
tcper 16 天前
我就喜欢用，一个项目里可以做到没有.css scss 文件，爽得很
不过大部分情况下还是会有一两个的 |
 |
20
raphaelsoul 16 天前
不喜欢 但好过分离的 css
|
 |
21
hafuhafu 16 天前
用 Tailwind 和手写也不冲突吧。
|
 |
22
WillBeethoven 16 天前
1. 如果以布局相关的代码为主就很清晰了，不会满屏飞而且便于了解 HTML 布局结构。
2. Tailwind 自己是有设计在里面的，具体请看： https://refactoringui.com/book/ |
 |
23
lujiaxing 16 天前
那你不用 tailwind css, 好多样式你要怎么实现啊? 手搓么?
|
 |
25
yangg 16 天前
看起来真丑，不好用，不想用，
用了之后：真香 |
 |
26
xeneizes 16 天前
vue3 里我开始用 uno 了
|
 |
28
RogerL 16 天前
好用，爱用，不用想类名，而且 AI 友好，又方便移植
|
 |
29
goldeye0351 16 天前
一直用的 talwind, 感觉很不错.
|
 |
30
TimPeake 16 天前
适合 “自由发挥” 项目 ？一般公司的项目都是蓝湖之类的一键 cv css, 居中之类的那些外层通用属性，用 talwind 好像又有点 “浪费了”， 大佬们是 怎么解决这个问题的
|
 |
31
tonytonychopper 16 天前 2
前段时间用了一阵子 tailwindcss ，总结下：
优点： 1. 不用起 class name 2. AI 友好 3. 效率高 缺点： 1. debug 麻烦 2. 写多了看得眼花 |
 |
33
felbryiozzzz 16 天前
首先编辑器插件都有智能提示，有补全，也能 hover 看生成样式
常用的布局类、文本样式类、边框等等用的多了，写起来是真的流畅（结合 uno 的变体 https://unocss-cn.pages.dev/transformers/variant-group 也能提升一些书写体验） 确实在渐变、动画还有一些其它复杂的地方不太方便，但是可以多记录总结些经验，毕竟不是经常用到的场景，可以用 A4 打印纸打印出来一份总结放旁边 至于 devtools 调试 element ，大部分场景还是通过选择器去选元素定位吧，devtools 有，vue devtools 也有这类功能。 人工找节点的场景太少了吧（我是想不起来上一次需要人工去 dom 树里找节点的场景） 作为一个过去纠结 CSS 类命名规范的老前端，感觉原子化 CSS 简直不要太爽 你如果是团队管理者或是 UI 库作者，原子化 css 甚至还可以让你很轻松的管理项目主题规范，间距、颜色、文字排版等等。你的项目里能出现几种颜色，几种文字排版，通过 theme 自定义好，约束大家只能用这几种，tailwind 和 unocss 是真的便捷 |
 |
34
AchieveHF 16 天前
好用
|
 |
35
abigeater 16 天前
一开始感觉和 inlinestyle 没区别，然后开始接触，然后越用越爽，一段时间没用又嫌弃他，然后用起来又越用越爽
|
 |
36
tianzi123 16 天前
反对这个的跟 5 年前反对用 ts 的一样, 跟吹 jq 的一样,都得被淘汰
|
 |
37
thetbw 16 天前
一个窗口写代码，一个窗口预览，界面如流水般刷刷的出来的感觉，真的爽。不用来回切，也不用思考命名
|
 |
40
yutong16 16 天前 1
最开始很鄙视，习惯之后，妈呀，真香～～
|
 |
41
codehz 16 天前
tailwind 的真正优势在于可以通过冒号组合 variant 和 utility ，这解决了 inline style 的一个很大的问题：没法给伪类，伪元素，媒体查询定义样式，然后 variant 也可以定义多个 slot ，这使得很多原本要重复写的代码都可以省去（例如同时用没提查询和类来定义深色模式的样式）
然后 tailwind 也提供了插件机制可以实现更加复杂的组合，类似 daisyUI 那样（当然我并不是很喜欢 daisyUI 的样式） |
 |
42
sheeta 16 天前
好用，爱用，都不用取名了，哈哈
|
 |
43
12tall 16 天前
好用，够基础，又有点抽象
|
 |
44
dufu1991 16 天前
建议耐着性子，在一个完整项目中使用超过一个月之后再感觉一下。
|
 |
45
misaka20 16 天前
组件拆的足够细，挺好用。
|
 |
46
xiaohupro 16 天前
刚开始用确实得去查各种样式，但是一但记住了以后，用起来确实很丝滑，有种从 Windows 换成 mac 的感觉，一开始各种不适应，但是适应了以后确实爽，遇到是在不满意的可以自己再写 css 实现
|
 |
47
1up 16 天前 via iPhone
喜欢
|
 |
48
weiwenhao 16 天前
挺好用的，class 直接替代 style 了，tailwind 很适合让 ai 帮忙写样式，直接就代码聚合在一起输出出来
|
 |
49
Vitta 16 天前
挺好用的啊，虽然代码看着很不是很爽，但是写着是真爽
|
 |
50
Jaosn 16 天前
太好用了，why ？写前端这么多年，无论大厂与否，发现 CSS 维护反而是各个项目中最薄弱的
|
 |
51
Pipecraft 16 天前 2
@wednesdayco #4 用 tailwind 之前有 OP 同样的想法，对它很抵触。用了之后，发现确实很好用。
如果喜欢传统写法，就用 1 楼说的 @apply 。 @apply 与手写的区别： - 可以节省很多重复代码 - 能帮你优化代码。至少比我自己写得好很多。 - :hover, 响应式, 黑暗模式等一步搞定。 放个截图看一下效果。   |
 |
52
X0V0X 16 天前 via iPhone
现在用 unocss ，真香
|
 |
53
rocmax 16 天前 via Android
嫌乱可以用插件折叠起来
|
 |
54
buf1024 16 天前
好用 爱用。因为是后端人员，一开始怎么也学不会 css 。有了 tailwindcss 之后，css 作为界面描述的一部分。后端人员写 css 也可以起飞~~~
|
 |
55
whp1473 16 天前
好用爱用，后端+AI+tailwindcss 起飞
|
|
56
whp1473 16 天前
你可以按照原来的思想用 @apply 生成一个自定义的，但如果有 AI ，其实你可以改变下思想，AI 就是模板样式，你想要什么直接对话就可以，比如 所有按钮样式与 XX 保持一致 = 统一改样式
|
 |
57
euronx 16 天前
好用，爱用，一直用
|
 |
58
BealuoC 16 天前
爱用 再也不用自己想类名
|
 |
59
XTTX 16 天前
Monorepo 结构:
-多个 app 存在于单一代码仓库中 -共享组件库作为内部包 -集中化的工具和配置 设计系统实现: -light/dark 设计令牌(颜色、间距、排版等)定义为 CSS 变量 -这些变量作为单一真实来源 -Tailwind CSS 配置为使用这些自定义变量 -所有 app 之间的一致样式 这种方法提供了几个好处: -所有产品间的用户界面/用户体验一致性 -减少代码重复 -简化依赖管理 这几年的趋势 |
 |
60
connection 16 天前
1. 省去定义类的繁琐
2. 快捷构建设计系统基础 3. ai 更“友好” |
 |
61
lancelock 16 天前
我用 uno
|
 |
63
freezebreze 16 天前
后端快速学习 css 的法宝，
|
 |
66
max1024 16 天前
太好用了。我所有项目都加了 tailwindcss
|
 |
67
Track13 16 天前
@ramcasky 我这里的 51 是 ‘现在用 unocss ，真香’。你说的可能是#50 。在我看来这和直接写 css 的区别就是方便使用 tailwindcss 的变量。
|
 |
68
newaccount 16 天前 2
说明你是 css 语义派
这东西本质上就是 css 原子派与语义派的争论 喜欢上来一句话不说直接就是干，那就是原子派 老子就是微操大师，标签向右微移 5 个像素，OK ！ 但如果你喜欢万事有规矩，以后可以统一修改，那就是语义派，这玩意完全不适合 |
 |
69
bzw875 16 天前
之前面试因为我没用过 tailwind 把我挂了，后面用上觉得真香
|
 |
70
EricYuan1 16 天前
当然好啊，就平时使用来说，写 vue 我一般 unocss+naiveui ，写 react 我就用 tailwindcss 了，没办法 tailwindcss 的生态是 unocss 不可及的，很多酷炫的 UI 组件都是基于 tw 的，比如 shadcn 、magicui 等。
至于说代码界面不好看或者控制台不好调试的问题，vscode 可以用 inlinefolder 插件，chrome 可以用 atomcss 插件（我都没装，我自适应良好😂） |
 |
71
wlf2mydream 16 天前 1
AI 生成 Tailwindcss 太无敌
|
 |
72
BeijingBaby 16 天前
1 、不用起名困难
2 、扒别的 tailwind 写的网站样式直接复制就可以了 3 、省事 |
 |
73
vem 16 天前
我再补充一个优点，写代码不用在 html 和 css 之间来回跳转
|
 |
74
zzzyyysss 16 天前
不用起那些什么语义化的类名，心智负担太小了。
还有就是响应式，暗黑模式极度方便。 自从 19 年开始使用 tailwind 之后，我已经没怎么写过 css 文件了，简直不要太爽。 |
 |
75
imherer 16 天前
感觉 tailwind 很多东西记不住，不知道怎么写。 但是 unocss 则没这个问题，它可以随便写
最近用 AI 生成的代码大多数都是 tailwind ，最近也在看 tailwind |
 |
76
yusf 16 天前
我看我项目里没有 css 文件我就爽歪歪
|
 |
77
abc1310054026 16 天前
tailwind 是我爹
|
|
78
wednesdayco OP 看了下大家的讨论：
1. 不用起类名问题，减少心智负担 我感觉使用 css module 或者 scope 几乎就是几个类名反复使用 有啥心智负担。去背 tailwind 那么名字就没负担了？看着满屏 class 我咋感觉精神污染更重呢？ 2. 关于 debug 时候的问题，除非全部用 apply 的写法，那不就又得起类名了，不然去 element 里找元素是真的找不到啊，特别是有 js 动态修改样式的时候。 3. ai 的我确实还没体验到优点 对于我来说，这东西最大的优势就是解决样式冲突的问题。 |
 |
79
dudubaba 16 天前
没用之前：这玩意就是鸡肋，那么多变量谁记得住，不好维护，垃圾！
用了之后：这玩意真是太好用了，装个插件各种提示，不用维护，不用写 css ，写前端完全离不开了。 |
 |
80
NerbraskaGuy 16 天前
tailwind 适合大型 web 项目和组件样式复用度高的，UI 要是那种一个页面十个按钮有十种样式的就老实了。
|
 |
81
kamilic 16 天前
形式不喜欢，但是实操喜欢，有个同事说服了我，这种粘在一起的形态就是方便复制粘贴（堆史）。
而且你堆史还不影响最终输出的 css 都是合并同类史，没有一点冗余，真的是又爱又恨了。 |
 |
82
niub 16 天前
我喜欢 Fower： https://fower.vercel.app/
|
 |
83
fengxianqi 16 天前
如果是你自己一个人开发代码，你会觉得自己手写挺好；如果是一个团队，多个人改动的，你会发现 taiwind 更舒服（因为不用理解别人的 class 命名和结构），taiwind 是大趋势，用习惯后提效很明显的。
|
 |
84
Wxh16144 16 天前
非引战，觉得 tailwind/unocss 好用的，Vue 开发者绝对比 React 开发者多，因为 Vue 的 SFC 就是 css 和 template 在一个文件，现在 tw 和 nuo 只是吧 css 部分也糅进 template 了
我自己从 Vue2 切换到 React ，当初还没有 tw ， 但是我在用 R ，也不妨碍我持续关注 nuo 和 tw 。 现在团队用的 less module 或者 cssinjs 。 即便我后面接触新的项目和新的团队在用 tw 。我也能做到看得懂。 当然让我选型，我还是喜欢 cssinjs 和 css module  |
|
86
Wxh16144 16 天前
@Wxh16144 补充一点，比如我关注的 unocss ， 我看到有人开启了 Attributify 模式，拿官网图举例子
 （图中开启了 Attributify 模式使用示例） 有一个疑问，作为 React 开发者，我有一个 JSX <Button text="sm white" /> 和 <button text="sm white" /> 前者 Button 的 text 是 props ， 后者是 className 额， 就这样 我不太喜欢在 css 写法上脑子转个弯 |
 |
88
magicdawn 16 天前
好用爱用 unocss
|
 |
92
lzgshsj 15 天前
辩经再多都不如深入体验一段时间来得直接。
这玩意的舒适区属于是懂的都懂，不懂的废再多口舌也不能理解。 地球这么大人那么多，喜欢折耳根、香菜、苦瓜的人都要跟不喜欢的人解释一遍为啥真的喜欢吗，没啥意义。 当然，如果不仅仅谈论个人喜好，还涉及到工作规范的话——你要是 leader 那就你说啥是啥，不是就老实跟着用完事了。 |
 |
93
zhangkai1024 15 天前
从嫌弃到喜欢
|
 |
98
chloerei 15 天前
可以阅读作者这篇博客，解释了为什么会设计成这样：
CSS Utility Classes and "Separation of Concerns" https://adamwathan.me/css-utility-classes-and-separation-of-concerns/ |
 |
100
dtdths1 14 天前
css 是完全无法维护的，是粪坑中的粪坑。同理还有 html 模版。
我现在最推荐的就是 jsx ，然后 css-in-js 或者 除了少量动画其他全部使用原子化 css 。 总之就是能不写 css 就不写 css 。 |
Select Language