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

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

写起来不累吗？

我一个后端要看吐了！

[IvanLi127]

你写前端不用组件不用库的吗？

[Rocketer]

出活速度快就是很大的优势，而且我也没觉得有啥不好的，反正每个组件都不大，看起来很清晰。

但如果你喜欢写大组件……这个习惯似乎更不好？

[DrakeXiang]

今年 google I/O 的官网就用了 tailwind.css 哦 😏

[noe132]

@ipwx scoped css 是很好用，不过它解决的是 namespace 的问题。我之前写 React 也能通过 babel 实现像 vue 一样的 scoped css ，不过最后用上 tailwind 后，css 写的越来越少了，最主要的原因就是你想重构 / 修改某个组件，直接剪切复制粘贴 jsx 就达到了把结构样式逻辑一次性调整到位的目的，不需要再到 css 里去修改类名啥的了。

[renhou]

上生产了，，虽然是国外
大型政府项目，tailwind 一把梭

[chanchan]

在我看来就是把 css 写在标签上，然后语法简化了一下。

[snoopyhai]

op 这么说, 一定是没有维护过老项目. 特别是别人写的老项目.

比如, 某个页面的某个 DOM 要改样式. 我打赌你肯定不敢直接改 DOM 对应的 css 内容. 因为你不知道改掉后, 其他页面会不会崩掉.

[lcbp]

觉得直接写到 class 里面太碍眼，也可以这样写：

```css
.select2-dropdown {
@apply rounded-b-lg shadow-md;
}
.select2-search {
@apply border border-gray-300 rounded;
}
.select2-results__group {
@apply text-lg font-bold text-gray-900;
}
```

[cslive]

你也可用单独用 @apply 写入一个 css 文件里

[DT27]

程序员也追星，就跟出来个新电视剧一样，大家都去追。

[theprimone]

我觉得最重要的一个特点就是可以直接写伪类伪元素，这样的话应该只有很少的情况下需要单独写个 css/less/scss 文件了，配合一些 IDE 插件，体验很好啊，就在 JS 代码里搞定一切它不香吗。最后，我主要用的 windicss [doge]

[joyyu]

我觉得可以借鉴它的核心思路，有的时候写起来还是挺香的。
自己日常不会直接引用它的库，但会写很多通用的基础样式就是参考着 tailwind 来的。

[makelove]

@HackerJax 虽然我还没用这个，但你说的 Button 问题，现在用的前端框架如 React 本身就可以抽象出组件，一组 class 在 Button 组件里写一次就行了不用到处写，都不用折腾什么 css in js 之类的了。

[xujiahui]

要不直接看官方的说明吧，https://tailwindcss.com/docs/utility-first ，刚开始看着是不容易接受，但是用起来真香。
>>> This approach allows us to implement a completely custom component design without writing a single line of custom CSS.

Now I know what you’re thinking, “this is an atrocity, what a horrible mess!” and you’re right, it’s kind of ugly. In fact it’s just about impossible to think this is a good idea the first time you see it — **you have to actually try it**.

But once you’ve actually built something this way, you’ll quickly notice some really important benefits:

- You aren’t wasting energy inventing class names. No more adding silly class names like sidebar-inner-wrapper just to be able to style something, and no more agonizing over the perfect abstract name for something that’s really just a flex container.
- Your CSS stops growing. Using a traditional approach, your CSS files get bigger every time you add a new feature. With utilities, everything is reusable so you rarely need to write new CSS.
- Making changes feels safer. CSS is global and you never know what you’re breaking when you make a change. Classes in your HTML are local, so you can change them without worrying about something else breaking.

[Pastsong]

当然是为了解决问题，不要评价你不熟悉的事情

[shintendo]

你以为传统的 class 把结构和样式分离了吗？
以 BEM 为例，你没发现它把 html 结构在类名里又维护了一份吗？
结构和样式从来就没有真正解耦过，不管是 2012 还是 2022 。
转变只在于传统写法样式依附于结构，改样式容易改结构麻烦，原子类写法结构依附于样式，改结构容易改样式麻烦。

[3dwelcome]

首先明确一点，class 和 style 是补充关系，不是替代关系。class 是全局控制样式，style 是局部控制样式。

既然无法相互替代，那么把 style 完善一下，弄个预编译，就是 tailwind css 干的事了。

tailwindcss 用的都是缩写，而原生 style 都是又丑又长的关键词。把代码变少，就意味着能变相提升代码的可维护性。

[DOLLOR]

直接用更粗暴的 CSS in JS 吧

const styleTitle: React.CSSProperties = {
...templateTitle,
marginTop: 20,
marginBottom: 12,
textAlign: 'center',
};

const styleDesc: React.CSSProperties = {
...templateDesc,
paddingLeft: 5,
paddingRight: 5,
};

<>
<div style={styleTitle}>{title}</div>
<div style={styleDesc}>{desc}</div>
</>

[TomPig0216]

tailwindcss 我一开始用的时候也有点反感
后来用着用着越用越香 简直就是香饽饽

[TomatoYuyuko]

没法忍受把 class 写的老长一串，太丑了我拒绝，遇到 UI 复杂一点的需求直接寄了