真的有人喜欢用 tailwind 么

[wednesdayco]

看着满屏的样式写在 html 上就头疼
点开 devtools element 想找个节点都难找
生僻一点的样式就还得去翻下文档
所以这玩意儿为啥有人喜欢用啊

[ramcasky]

好用 爱用 因为不用一直写重复的 css 啊 会用各种特性才不会出现你说的满屏的样式 一个 @apply 搞定

[dumbass]

好用 爱用

[ipwx]

AI 用 tailwind 很厉害，生成效果比 vue 的 scoped style 准多了。所以我最近开始用了。

[wednesdayco]

@ramcasky 用 apply 跟我手写手多少区别

[elevioux]

不用 tailwind 。感觉就是 inline style ？

[liudewa]

6 年前端 爱用 用完根本离不开

[bgm004]

@ramcasky 用 apply 不就是在写重复 css 。还是我了解的不对？

[ramcasky]

@wednesdayco 区别就是你哼哧哼哧撸了半天 我这边几个样式名写一下就好了 这效率肯定不是一个层次的，而且不是所有都是复杂的 css,简单直接用内置的原子样式就好了,你说为什么有人喜欢用 我说因为提高了效率 简洁美观

[liudewa]

@liudewa #6 直接元素上 右键审查元素啊 ,或者直接搜索对应 class 就行了

[craftsmanship]

不喜欢 还是喜欢纯手撸 精确到像素级 CSS 相比传统意义上的编程 更像是种艺术
但现在 AI 时代都不提倡手工编码了 所以得看写代码的目的是什么
如果是搬砖 那咋效率高咋来 显然 AI 很喜欢 tw
如果是为了通过编程来取得心理上的愉悦 那肯定要自己写 用最符合自己口味的语言 用最骚的奇技淫巧 写最花里胡哨的代码 同时补充最详细的注释 解释清楚工程来讲怎么写才合适 主打一个虽然没啥卵用 但是我能写得出来 的自我满足感

[zidian]

真的，tailwind 也不拦着你自己定义 class

[BigPiggggg]

在 html 中写大量的 css 就像拉屎，看过去密密麻麻的密恐都犯了，写一些基础的就行了比如边距、大小啥的，复杂的 css 还是建议单独提出来

[flydogs]

省时省力，挺好的。

[cat]

这两年喜欢用 tailwindcss 纯粹是不喜欢起类名

PS. 自认为手写 css 的功底不算差，曾经用 css 手撸一把尤克里里

[c3de3f21]

敝人是这样理解的，达到目的就行，手段可以只有一种，也可以有很多种。学一些东西并不是因为要使用它，可能是为了能看别人写的看个大概。

[Chrisssss]

@craftsmanship 搬砖也搬出艺术来了？

[craftsmanship]

@Chrisssss 仔细审题

[yangth]

代价是污染 html 结构，类似 vue 的框架花了大力气精简开发阶段的模板，组件封装，自定义接口，结果你们一朝回到解放前，往上面加一堆东西，建议以后把 js 代码也搬到 html 里面去，来一个 html 、css 、js 合家欢

[tcper]

我就喜欢用，一个项目里可以做到没有.css scss 文件，爽得很
不过大部分情况下还是会有一两个的

[raphaelsoul]

不喜欢 但好过分离的 css

[hafuhafu]

用 Tailwind 和手写也不冲突吧。

[w3]

1. 如果以布局相关的代码为主就很清晰了，不会满屏飞而且便于了解 HTML 布局结构。
2. Tailwind 自己是有设计在里面的，具体请看： https://refactoringui.com/book/

[lujiaxing]

那你不用 tailwind css, 好多样式你要怎么实现啊? 手搓么?

[bnrwnjyw]

@yangth >"建议以后把 js 代码也搬到 html 里面去"
你穿越了？ React.js 和 JSX 已经有十几年了。

[yangg]

看起来真丑，不好用，不想用，
用了之后：真香

[xeneizes]

vue3 里我开始用 uno 了

[Hanser002]

@yangth vue 现在也是推 uno 呀，而且复杂场景 template 写起来更恶心，还得是 jsx

[RogerL]

好用，爱用，不用想类名，而且 AI 友好，又方便移植

[goldeye0351]

一直用的 talwind, 感觉很不错.

[TimPeake]

适合 “自由发挥” 项目 ？一般公司的项目都是蓝湖之类的一键 cv css, 居中之类的那些外层通用属性，用 talwind 好像又有点 “浪费了”， 大佬们是 怎么解决这个问题的

[tonytonychopper]

前段时间用了一阵子 tailwindcss ，总结下：
优点：
1. 不用起 class name
2. AI 友好
3. 效率高
缺点：
1. debug 麻烦
2. 写多了看得眼花

[twofox]

@yangth 这 vue 有半毛钱冲突吗？样式写在组件里，你封装好组件不久可以了？

[felbryiozzzz]

首先编辑器插件都有智能提示，有补全，也能 hover 看生成样式
常用的布局类、文本样式类、边框等等用的多了，写起来是真的流畅（结合 uno 的变体 https://unocss-cn.pages.dev/transformers/variant-group 也能提升一些书写体验）
确实在渐变、动画还有一些其它复杂的地方不太方便，但是可以多记录总结些经验，毕竟不是经常用到的场景，可以用 A4 打印纸打印出来一份总结放旁边
至于 devtools 调试 element ，大部分场景还是通过选择器去选元素定位吧，devtools 有，vue devtools 也有这类功能。 人工找节点的场景太少了吧（我是想不起来上一次需要人工去 dom 树里找节点的场景）
作为一个过去纠结 CSS 类命名规范的老前端，感觉原子化 CSS 简直不要太爽

你如果是团队管理者或是 UI 库作者，原子化 css 甚至还可以让你很轻松的管理项目主题规范，间距、颜色、文字排版等等。你的项目里能出现几种颜色，几种文字排版，通过 theme 自定义好，约束大家只能用这几种，tailwind 和 unocss 是真的便捷

[AchieveHF]

好用

[abigeater]

一开始感觉和 inlinestyle 没区别，然后开始接触，然后越用越爽，一段时间没用又嫌弃他，然后用起来又越用越爽

[19cm]

反对这个的跟 5 年前反对用 ts 的一样, 跟吹 jq 的一样,都得被淘汰

[thetbw]

一个窗口写代码，一个窗口预览，界面如流水般刷刷的出来的感觉，真的爽。不用来回切，也不用思考命名

[ramcasky]

@tianzi123 TS 这个我真的优化要说(:

[ramcasky]

@ramcasky #38 优化=>有话

[yutong16]

最开始很鄙视，习惯之后，妈呀，真香～～

[codehz]

tailwind 的真正优势在于可以通过冒号组合 variant 和 utility ，这解决了 inline style 的一个很大的问题：没法给伪类，伪元素，媒体查询定义样式，然后 variant 也可以定义多个 slot ，这使得很多原本要重复写的代码都可以省去（例如同时用没提查询和类来定义深色模式的样式）
然后 tailwind 也提供了插件机制可以实现更加复杂的组合，类似 daisyUI 那样（当然我并不是很喜欢 daisyUI 的样式）

[sheeta]

好用，爱用，都不用取名了，哈哈

[12tall]

好用，够基础，又有点抽象

[dufu1991]

建议耐着性子，在一个完整项目中使用超过一个月之后再感觉一下。

[misaka20]

组件拆的足够细，挺好用。

[xiaohupro]

刚开始用确实得去查各种样式，但是一但记住了以后，用起来确实很丝滑，有种从 Windows 换成 mac 的感觉，一开始各种不适应，但是适应了以后确实爽，遇到是在不满意的可以自己再写 css 实现

[1up]

喜欢

[weiwenhao]

挺好用的，class 直接替代 style 了，tailwind 很适合让 ai 帮忙写样式，直接就代码聚合在一起输出出来

[Vitta]

挺好用的啊，虽然代码看着很不是很爽，但是写着是真爽

[Jaosn]

太好用了，why ？写前端这么多年，无论大厂与否，发现 CSS 维护反而是各个项目中最薄弱的

[Pipecraft]

@wednesdayco #4 用 tailwind 之前有 OP 同样的想法，对它很抵触。用了之后，发现确实很好用。
如果喜欢传统写法，就用 1 楼说的 @apply 。

@apply 与手写的区别：
- 可以节省很多重复代码
- 能帮你优化代码。至少比我自己写得好很多。
- :hover, 响应式, 黑暗模式等一步搞定。

放个截图看一下效果。

[X0V0X]

现在用 unocss ，真香

[rocmax]

嫌乱可以用插件折叠起来

[buf1024]

好用 爱用。因为是后端人员，一开始怎么也学不会 css 。有了 tailwindcss 之后，css 作为界面描述的一部分。后端人员写 css 也可以起飞~~~

[whp1473]

好用爱用，后端+AI+tailwindcss 起飞

[whp1473]

你可以按照原来的思想用 @apply 生成一个自定义的，但如果有 AI ，其实你可以改变下思想，AI 就是模板样式，你想要什么直接对话就可以，比如 所有按钮样式与 XX 保持一致 = 统一改样式

[euronx]

好用，爱用，一直用

[MiMiGe]

爱用 再也不用自己想类名

[XTTX]

Monorepo 结构:
-多个 app 存在于单一代码仓库中
-共享组件库作为内部包
-集中化的工具和配置

设计系统实现:
-light/dark 设计令牌(颜色、间距、排版等)定义为 CSS 变量
-这些变量作为单一真实来源
-Tailwind CSS 配置为使用这些自定义变量
-所有 app 之间的一致样式

这种方法提供了几个好处:
-所有产品间的用户界面/用户体验一致性
-减少代码重复
-简化依赖管理

这几年的趋势

[connection]

1. 省去定义类的繁琐
2. 快捷构建设计系统基础
3. ai 更“友好”

[lancelock]

我用 uno

[ramcasky]

@Track13 见#51 写法

[freezebreze]

后端快速学习 css 的法宝，

[ziyanghua]

@yangth 我的项目还在用 jquery ，听到这有点梗住。。

[AV1]

@Pipecraft 这我感觉看上去跟写 less sass 已经没区别了，特别是&:disabled 、&:not

[max1024]

太好用了。我所有项目都加了 tailwindcss

[bgm004]

@ramcasky 我这里的 51 是 ‘现在用 unocss ，真香’。你说的可能是#50 。在我看来这和直接写 css 的区别就是方便使用 tailwindcss 的变量。

[newaccount]

说明你是 css 语义派
这东西本质上就是 css 原子派与语义派的争论
喜欢上来一句话不说直接就是干，那就是原子派
老子就是微操大师，标签向右微移 5 个像素，OK ！
但如果你喜欢万事有规矩，以后可以统一修改，那就是语义派，这玩意完全不适合

[bzw875]

之前面试因为我没用过 tailwind 把我挂了，后面用上觉得真香

[EricYuan1]

当然好啊，就平时使用来说，写 vue 我一般 unocss+naiveui ，写 react 我就用 tailwindcss 了，没办法 tailwindcss 的生态是 unocss 不可及的，很多酷炫的 UI 组件都是基于 tw 的，比如 shadcn 、magicui 等。

至于说代码界面不好看或者控制台不好调试的问题，vscode 可以用 inlinefolder 插件，chrome 可以用 atomcss 插件（我都没装，我自适应良好😂）

[wlf2mydream]

AI 生成 Tailwindcss 太无敌

[BeijingBaby]

1 、不用起名困难
2 、扒别的 tailwind 写的网站样式直接复制就可以了
3 、省事

[vem]

我再补充一个优点，写代码不用在 html 和 css 之间来回跳转

[zzzyyysss]

不用起那些什么语义化的类名，心智负担太小了。
还有就是响应式，暗黑模式极度方便。
自从 19 年开始使用 tailwind 之后，我已经没怎么写过 css 文件了，简直不要太爽。

[imherer]

感觉 tailwind 很多东西记不住，不知道怎么写。 但是 unocss 则没这个问题，它可以随便写

最近用 AI 生成的代码大多数都是 tailwind ，最近也在看 tailwind

[yusf]

我看我项目里没有 css 文件我就爽歪歪

[abc1310054026]

tailwind 是我爹

[wednesdayco]

看了下大家的讨论：
1. 不用起类名问题，减少心智负担
我感觉使用 css module 或者 scope 几乎就是几个类名反复使用 有啥心智负担。去背 tailwind 那么名字就没负担了？看着满屏 class 我咋感觉精神污染更重呢？
2. 关于 debug 时候的问题，除非全部用 apply 的写法，那不就又得起类名了，不然去 element 里找元素是真的找不到啊，特别是有 js 动态修改样式的时候。
3. ai 的我确实还没体验到优点

对于我来说，这东西最大的优势就是解决样式冲突的问题。

[dudubaba]

没用之前：这玩意就是鸡肋，那么多变量谁记得住，不好维护，垃圾！
用了之后：这玩意真是太好用了，装个插件各种提示，不用维护，不用写 css ，写前端完全离不开了。

[NerbraskaGuy]

tailwind 适合大型 web 项目和组件样式复用度高的，UI 要是那种一个页面十个按钮有十种样式的就老实了。

[kamilic]

形式不喜欢，但是实操喜欢，有个同事说服了我，这种粘在一起的形态就是方便复制粘贴（堆史）。
而且你堆史还不影响最终输出的 css 都是合并同类史，没有一点冗余，真的是又爱又恨了。

[niub]

我喜欢 Fower： https://fower.vercel.app/

[fengxianqi]

如果是你自己一个人开发代码，你会觉得自己手写挺好；如果是一个团队，多个人改动的，你会发现 taiwind 更舒服（因为不用理解别人的 class 命名和结构），taiwind 是大趋势，用习惯后提效很明显的。

[Wxh16144]

非引战，觉得 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

[yangth]

@bnrwnjyw JSX 逻辑也是分离的，不会把所有 js 写到 dom 里

[Wxh16144]

@Wxh16144 补充一点，比如我关注的 unocss ， 我看到有人开启了 Attributify 模式，拿官网图举例子



（图中开启了 Attributify 模式使用示例）

有一个疑问，作为 React 开发者，我有一个 JSX

<Button text="sm white" /> 和 <button text="sm white" />

前者 Button 的 text 是 props ， 后者是 className 额， 就这样

我不太喜欢在 css 写法上脑子转个弯

[bnrwnjyw]

@yangth 没人说“所有”，tailwind 也不是“所有”都在 dom 上

[magicdawn]

好用爱用 unocss

[cxe2v]

@Chrisssss 是的，那些建筑工艺能称得上艺术？都是些糊口的技能，跟你随便糊弄两下一个效果

[cxe2v]

@ramcasky #38 一天过去了也没见你说出半个字来

[yangth]

@bnrwnjyw tailwind 可以完全抛弃 css 写法，jsx 不行

[lzgshsj]

辩经再多都不如深入体验一段时间来得直接。

这玩意的舒适区属于是懂的都懂，不懂的废再多口舌也不能理解。

地球这么大人那么多，喜欢折耳根、香菜、苦瓜的人都要跟不喜欢的人解释一遍为啥真的喜欢吗，没啥意义。

当然，如果不仅仅谈论个人喜好，还涉及到工作规范的话——你要是 leader 那就你说啥是啥，不是就老实跟着用完事了。

[zhangkai1024]

从嫌弃到喜欢

[ramcasky]

@cxe2v #90 啊哈哈哈 我是说反对 TS 的大有人在，js 和 ts 各有各的场景， 反对无可厚非。
没有必要场景没必要都上 ts

[ramcasky]

@Track13 #67 你整个帖子刷下来，那么多友友都说了好多了，你从中如果只提取到这个要素的话，我很难说服你

[bnrwnjyw]

@yangth 莫名其妙，你搁这虚空辩论呢？我有发表相反的言论吗？我同意你说的

[ramcasky]

@DOLLOR 这个只是抽取好的 css 类，如果不抽取工具类共用的话，是可以直接 类似这样写的

[chloerei]

可以阅读作者这篇博客，解释了为什么会设计成这样：

CSS Utility Classes and "Separation of Concerns" https://adamwathan.me/css-utility-classes-and-separation-of-concerns/

[bowencool]

@Wxh16144 #86 这都新语法了，还不转弯？除非你一开始就不会写 CSS

[dtdths1]

css 是完全无法维护的，是粪坑中的粪坑。同理还有 html 模版。
我现在最推荐的就是 jsx ，然后 css-in-js 或者 除了少量动画其他全部使用原子化 css 。
总之就是能不写 css 就不写 css 。