学习tailwind.css的必要性？

Question

现在有 CSS预处理器：less、scss等方案，这些方案基本上都可以简化 CSS 代码编写。
现代CSS解决方案 tailwind.css 将 CSS 简化并书写到标签，这种书写方式与传统的CSS不同，最终呈现的效果是一样的。

可是它有一种问题就是所有的样式都写到标签上，其实也不太美观。而 CSS 则可以抽离成单独的文件或者使用 scope 作用域做私有化。

请问学习 tailwind.css 的必要性有大吗？各位有没有在实际项目中使用过 tailwind.css？

Answer 1

tailwind 我个人的感觉是 成也萧何败萧何

它的核心理念是 原子化 css，将操作封装为类名来实现样式，这种实现模式在 Bootstrap 中也能见到，tailwind 把它发扬光大了

好处是可以快速实现结构，风格和样式相对统一（因为都用预定义好的类名了）

坏处是直接在 HTML 中使用大量的类名来应用样式，不利于后续维护，再加上它没办法针对所有的情况来封装类，遇到复杂的需求你还是得自己写样式

至于必要性，个人项目看个人喜好，团队项目看团队规范，没有非 tailwind 不可的说法

补充：

还有一个我觉得比较重要的点，就是不建议初学者去使用 tailwind.css，诚然，它的封装很便利，可是初学者在这个过程中也会 丢失 自己写 css 代码的经验

如果初学者对框架产生 依赖性，那当某天脱离框架时，可能就写不出 css 了

总的来说，对于比较小的项目，它可以快速成型，维护成本也不会太高；但是项目过大或者对样式的要求比较复杂时就不大合适

参考
Adam Wathan（tailwind创始人） - CSS Utility Classes and "Separation of Concerns"
官方博客（国内节点） - tailwind blog

Answer 2

其实 Less/Scss/Stylus 这种CSS预处理器 和 TailwindCSS 这种原子类的CSS库，并不是为了解决同一个问题。你可以在使用CSS预处理器的同时使用 Tailwind。

TailwindCSS 的出现起初只是因为有很多人和项目的作者要他的自己客制化的原子类样式表（如果我没有记错的话）。类似于我们经常会在项目中写的 flex、flex-1 之类的通用样式表，以便在自己的项目中使用。然后作者觉得可以自己的这个作为一个开源项目来发展……

---

OP提到的问题：

可是它有一种问题就是所有的样式都写到标签上，其实也不太美观。而 CSS 则可以抽离成单独的文件或者使用 scope 作用域做私有化。

其实可以在 tailwind 的基础同时使用基于 tailwind 的组件库，比如说 DaisyUI。
这块内容社区大佬 @Meathill 有很多的相关分享 👉 如何正确使用 TailwindCSS。

也就解决了会在 html 中书写一大堆 ClassName 造成的阅读困难和不美观等问题。

- <button class="bg-indigo-600 px-4 py-3 text-center text-sm font-semibold inline-block text-white cursor-pointer uppercase transition duration-200 ease-in-out rounded-md hover:bg-indigo-700 focus-visible:outline-none focus-visibl">
+ <button class="btn btn-primary">
  Tailwind Button
</button>

同时也不是说使用了 tailwind 之后你就完全不需要写CSS样式了，一些高度客制化的样式，还是需要你去书写的，只不过可以在这些你自定义的样式中，直接使用 tailwind 提供的各种原子样式。

---

至于作用域私有化的问题，CSS预处理器 和 Tailwind 并没有提供解决方案。这个是另外一个系统了，比如说 React 使用者中比较主流的 CSS Module 方案 和 Vue 提供的 组件作用域。
这些和你是不是使用 CSS预处理器 和 Tailwind 并没有直接关系。

---

总得来说，在项目中使用 tailwind 可以相当程度的解决原子类样式复用的问题，以及一些主题样式标准化的问题。
你付出的成本就是，在初次使用时期的阵痛:

• tailwind 初始化的问题
• 项目引入 tailwind 后和原有UI库样式冲突的问题
• tailwind 原子类命的记忆负担

但是在渡过了使用初期的阵痛之后，很明显会感觉到 tailwind 的真香之处，这些从各个使用者的反馈以及案例文章中可以体会到。

---

最后就是不要排斥一个新的技术栈，可以浅浅尝试一下，说不定就解决了之前某个一直困扰自己的问题了。
对于我来说就是不需要每次都手工去维护一些通用的原子类了，并且可以使用 tailwind 提供的插件来提示补全。

Answer 3

其实用了 tailwind.css 也并不是说就完全抛弃之前的写法,例如有多个 item 类的元素,也一样可以使用 .item 来设置公共的样式,如果其中一个 item 有特殊的样式,按之前的写法可能需要给该 item 多命名一个类名,然后给这个类名设置样式,而往往最费时间的就是如何想一个适合的名称,而如果使用 tailwind.css 就不用去想这个名称了。我觉得还是怎么方便怎么用, tailwind.css 类似的框架只是提供多一种实现方式而已。

Answer 4

less、scss 还可以接受，tailwind这些可以说完全没有必要。

如果是短期项目，上过一次就不改了，什么框架都可以。

如果是长期项目，那得好好掂量一下了，想象一下，三、五年后，这些框架还能跑起来吗？或者看下 5 年前的项目，能迅速上手的肯定是依赖越少的项目。

Answer 5

Tailwind CSS的优点和缺点
Tailwind 与 Bootstrap：优点和缺点
个人观点：Facebook经过重构后的css体积已经重原来的413kb 压缩到74kb。在一定程度上这个的颗粒度还是可以的，直接去看一些网站和实践比较直接，官网这类网站用的多比如ChatGPT,open ai官网，还有一些游戏官网。

Answer 6

我最近两年差不多写了七八个项目，全是tailwind ，绝对不用任何其它css方案。用吧，信我，方便。

Answer 7

说真的 不要赖tailwind 其实tailwind就是预加了一些通用的类而已

像我们项目 我们也会自己去写一些全局的类 这样使用起来就会非常方便。

tailwind不外乎就有点像 将自己写好的全局类分享给大家一起用而已。

除了对初学者不太好友好怕他们形成依赖之外，我还是很支持这样的。