[吐槽]这个世界上为什么会有 Tailwind Css 这种东西？

[HackerJax]

复制一段官网的代码：

<figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800">
  <img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512">
  <div class="pt-6 md:p-8 text-center md:text-left space-y-4">
    <blockquote>
      <p class="text-lg font-medium">
        “Tailwind CSS is the only framework that I've seen scale
        on large teams. It’s easy to customize, adapts to any design,
        and the build size is tiny.”
      </p>
    </blockquote>
    <figcaption class="font-medium">
      <div class="text-sky-500 dark:text-sky-400">
        Sarah Dayan
      </div>
      <div class="text-slate-700 dark:text-slate-500">
        Staff Engineer, Algolia
      </div>
    </figcaption>
  </div>
</figure>

听说这玩意儿最近很流行？

跟手写 style 有啥区别啊？

真有把这个用于生产环境的吗？

写起来不累吗？

我一个后端要看吐了！

[cmdOptionKana]

看是不好看，但写的时候配合预览，就写得很爽。

[wonderfulcxm]

我也觉得奇怪，这样写好丑啊，不知为什么流行起来了。

[noe132]

手写 style 的最大的不方便在于，如果你想重构这个组件，那么这个组件的 CSS 你也要重构，一次要同时给改两个文件，很多时候你自己也搞不清了最后就是重写一遍。
这种原子 css 看起来很繁琐，但实际上写起来无比顺手，想改哪里改哪里，结构和样式都在一个地方，不会出现不同步的问题

[dreasky]

快速出原型

[zqx]

一切崇拜缩写的语言 /框架，我都不会学的...

[HackerJax]

@noe132 没明白，你说的组件是可复用的组件吗，为什么需要改两个文件。说到这里，我想说的问题是，例如我的项目，对于所有的按钮都有特定的样式，用这种方式要写很长一串，要是有变动，比如 border-radius 由 4 改成 5 ，那基本上每个按钮都要改，用 class 方式的话，我直接改 .button 的代码就可以了哇

[jolanyu]

tailwind 也可以复用，个人觉得 tailwind 主要解决了取 class 名的问题

[pcbl]

主要是解决了部分组件类框架想做自定义修改很难下手的问题

[autoxbc]

确实太丑了，我要写内联风格的样式时，也是有格式的

[christin]

原来写 css 要在 HTML 里面写 class 然后在 style 标签里面写样式，不管是一个文件还是两个文件都要翻来翻去，还要考虑 class 起什么名。现在直接在行内写就不用想 class 名和来回翻了。而且在 vue 和 react 里面行内样式要写成对象的形式，用 tailwind 就可以直接写类名改样式了。
至于你说的一个 class 可以用在多处和 tailwind 不冲突，如果有样式重复的地方同样可以单独拿出来。

[caolvchong]

tailwind css 可以认为主要是 规范（颜色、行高、边距....） + 响应式的 style ，不想写很长也可以，换成 @apply 也可以剩一个样式名。

就是有半天的上手学习成本，初期使用要常翻文档，vs code 装点插件会好点。熟悉了还是挺香的。

原子化 css 和组件化 css ，看你怎么取舍了，没有非此即彼

[terranboy]

写起来很爽

[zooo]

风水轮流转
以前的非组件化开发
css 分离出来，可以使用 class 同时修改多个地方的样式

现在组件化开发

一个组件的 css 和结构放在一起，方便修改调整


瞎说的，不会前端.....哈哈哈哈哈哈

[lqs]

2012：页面结构与样式要分离，会更容易维护
2022：页面结构和样式本来就是耦合的，写在一起才更容易维护

[ipwx]

@noe132 你是不是对 css 有所误解。。。

现代化 js 框架 + webpack 不应该有 scoped css 用吗？

比如 vue one file component

[seki]

tailwind 要学一套 DSL 是有点麻烦，但是也不难上手，都是有规律可循的，多写几次再配合查文档就好了

更深层的好处在于样式变成了原子化的，减少了重复，也减少了冲突的概率

[bojackhorseman]

相信我，一旦你写习惯了就会真香的。别看着觉得难受就不上手试试。

[Leviathann]

少打些字不好？
绝大多数样式本来就没多少，两三个以内搞定舒服的很
太长了想抽一个名字也行

[pocarisweat]

CSS 本来就有两种不同的应用场景：

- 一种是批量给文档设置样式，这种情况更符合 CSS 的最初用意，也推荐样式和内容分离；
- 另一种情况 HTML 没有自己的实际意义，比如你要画个蓝色方块，这个时候 HTML 节点有什么脱离样式的特别语义吗？所以这种情况下 HTML 和 CSS 就应该结合，这里的 HTML+CSS 就是种描述性绘图工具。现代的框架也都是这么干的，所以 Tailwind CSS 在这里就很舒服

[Perry]

很合适 short term 产出，但是 long term 的话很容易出现屎山堆积的情景，还是 styled-component 香。