[吐槽]这个世界上为什么会有 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 有啥区别啊？

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

写起来不累吗？

我一个后端要看吐了！

[DKrookie]

在使用 UI 框架的时候，预先定义好统一风格后，对于页面样式控制很多时候本来就不需要太多的 css ，但是直接用 style 属性写 css 很麻烦，创建 css 文件又感觉没必要，所以如果使用 tailwindcss 就不用考虑这些，并且还不用想类名，并且还能配置自己的 tailwindcss 样式。而且没有说用了 tailwindcss 就不能用 css 文件了，如果样式很多，很复杂还是可以用 css 文件来写。并且你看到的这个是从原始样式写出来的，除非练习 tailwindcss ，不然生产上没人这么做吧。嫌多了可以用在 css 文件中用 @apply

[dNib9U2o8x]

第一次看到我是拒绝的，各种开嘲讽，用了一阵子后啪啪打脸，tailwind 是真的香，尤其有了 JIT 后那更是香疯了，喷 tailwind 的人大部分都没有实际用过一段时间吧

[meathill]

1. 我推荐用 tailwindcss 配合其它框架来用。比如我厂用了 element ui ，这时候我需要一个横向布局，间隔约 1 个汉字，那么直接 `flex ml-4` 就很方便，不需要跑到样式里定义一个样式，然后在模板里引用
2. 一些出场频率不高的样式，比如 grid ，用 tailwindcss 会容易很多
3. 分享 HTML 的时候，简单很多

建议面对任何流行技术，都抱着取其精华、弃其糟粕的心态，看看怎么能改进自己的工作。吐槽和挑战其实不难。

[yhxx]

其实这东西七八年前就有类似的了，比如网易的 NEC ，写起来真的觉得很痛苦
但是现在好像和 TypeScript 一样很政治正确

[noyidoit]

比起手写 style ，tailwindcss 少写了很多字，要达到无障碍使用的程度只需要付出十分钟的学习成本以及在 vscode 装一个插件

[WilliamLin]

赞同 @snoopyhai 说的，我自己写烦了 flex 的那些了，直接定义了一个自用的，然后必须说：特别香，无敌香。

[zbhcoder]

萝卜青菜，各有所爱；

[lneoi]

如果业务内有可以复用的 css ，说明可以归纳出自己的原子化 css ，没必要非得用框架定义的

[mengdodo]

写起来是很长，看着满屏幕的样式 code ， 但是写多了就体会到好处了，样式原子性（好像是这么介绍的），不存在父级影响子级的污染问题，很顺溜

[mengdodo]

顺便多一嘴，不喜欢这样可以用 apply 代替

[oneisall8955]

这跟 bootstrap 的写法有啥区别

[yl20181003]

@anguiao 非常感谢 我又去看了下文档 貌似前面加个!就可以

[tolking]

刚学 WindCSS 写个项目，刚开始还要翻文档看 Api 。找到一点规律就直接写了（配合 VSCode 插件），用来写组件还是很适合的。

[luwang]

对我来说，不想起类名，xxx-wrap 、xxx-content 、xxx ，烦死了，而且 tailwindcss 这样复用性也强啊

[TerranC]

体会就是最开始撸的时候只需要想 dom 结构后然后直接撸样式，而不用撸完 dom 先一个个想 class 名，对于前后端没分离或长期维护来说，还是可以逐步把 class 补上去然后 @apply 去重构。

[zzm88104]

刚接触 Tailwind, 发现他的好处是很容易从别人那里偷师... 做法都直观写在 class 里，而不是一会在 style="..." 一会分散在不同 css 文件,一会在<style>... 基本上直接复制粘贴过来效果也是保持一致的

[ChanKc]

@DrakeXiang 就每年简单用一下，静态展示一些内容，不怎么需要维护的页面，就随便吧

[iugo]

@lqs

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

中间少了许多:

1. 页面结构与样式要分离.
2. 页面结构 -> 组件, 分离的样式.
3. 页面结构 -> 业务组件 -> 通用组件, 分离的样式.
4. 页面结构 -> 业务组件(自带样式) -> 通用组件(自带样式).

样式和页面结构还是分离的, 不过和组件耦合了.

[phpbestforlong]

前端都被人耍，其实就左右两个基本点，记住左右两个手要张开握住。1 个是拿来一套 UI 库，1 个是拿来一套前端框架/库 jquery/vue/react 。其他都是假的，服务端又不干客户端事。

前端被人耍也是好的呀，要不然前端为什么工资比后端高呢。

前端普遍走广度路线，用了发现了一个库，就碾压其他自己创库的同学。

后端普遍 CRUD ，比前端广度不足，深度差不多，能工资不少吗