Tailwindcss 总结

整个这一章我们学习了关于 Tailwind 的大部分知识：

• 各种各样、数量庞大的实用类（原子类）
  • 这个是整个 Tailwindcss 的灵魂
  • 针对这一块的学习，最好的方式还是通过练习，在练习中慢慢熟悉常用的原子类
• 变体
  • 状态变体
    • hover、focus、checked...
  • 分组变体（group）
  • 深度选择器变体（peer）
  • 响应式开发（媒体查询：sm、md、lg）
  • 夜间模式（dark）
• 插件
  • 本质上就是一个函数，不要想那么复杂
  • 一般通过这个函数可以批量的添加自定义类
• 组件
  • 解决多个标签使用重复的类（原子类、自定义类）的问题
  • @apply xxx xxx xxx;
• 和 Postcss 集成
  • Tailwindcss 本身就是基于 Postcss 构建的，因此不需要安装 Postcss
  • 但是使用的时候需要安装具体的 Postcss 相关的插件
  • 在 Postcss 的配置文件中进行配置即可

Tailwindcss 本身也是在不断的进行更新的，所以随着时间的推移，后面会出现课程里面没有讲过的内容，也是非常正常。例如现在在新版本的 Tailwindcss 里面已经开始支持伪元素选择器了。

因此在学习的时候，不要去纠结某一个知识点课程里面有没有介绍，这个课程的目的是为了让你熟悉 Tailwindcss，以及知道Tailwindcss 的核心概念还有绝大多数场景下面的使用。

最后我们来思考一个问题：那就是为什么现在 Tailwindcss 会非常流行？

在我看来，Tailwindcss的大流行和现代前端的开发模式有很大的关系。如果把时间拨回到现代前端框架出现之前，那个时候流行的还是多页应用，书写的也是原生 CSS，如果在那个时候出现 Tailwindcss 或者和 Tailwindcss 类似的技术，意义其实不大，因为大家并不能从 Tailwindcss 里面感受到多大的便利，反而还增加了学习成本，因为里面有大量的新的样式类。

但是如果我们把时间快进到现在，现在的前端开发发生了巨大的变化，现在流行的是组件化开发以及使用状态来驱动视图。

首先来看组件化，相比一个整体的页面，一个组件的 HTML 和 CSS 的量会明显减少很多，前面我们使用 tailwindcss 来改写小米整个网页的时候，其实并没有感受到多大的便利，反而觉得很麻烦，需要去书写很多的原子类。

但是相比一个整体的页面，一个组件的 HTML 和 CSS 的量减少了很多，正因为 HTML 和 CSS 的量减少了很多，因此相比原生的 CSS，Tailwindcss这种开发方式，哪怕不说是多优秀，但是至少是打个平手。

那么为什么会这么火呢？实际上是第二个原因（状态来驱动视图）造就了 tailwindcss 大流行。在现代前端框架里面，都是使用状态来驱动视图，期望使用状态来控制视图里面的一切。