简介
Tailwind 是一个 CSS 框架，通过提供一系列的功能类，可以在 HTML 中可以直接使用这些类来实现样式的编写
与传统的 CSS 框架不同的是，Tailwind 的功能类可以添加伪类和响应式断点，并且可以使用 @apply 指令实现样式的复用
Tailwind 在编译时通过正则表达式提取所有位于 HTML 文件、JavaScript 组件和其他模板中的类名，生成相应的样式并将它们写入静态 CSS 文件，因此快速、灵活、可靠，并且没有运行时开销
Tailwind CSS 非常注重性能，通过仅生成项目实际使用的 CSS（Tree Shaking）来生成尽可能小的 CSS 文件，并结合缩小和网络压缩技术，通常可以产生小于 10kB 的 CSS 文件，即使对于大型项目也是如此
这意味着不必担心复杂的解决方案（如 code splitting），只需一次下载并缓存单个小型 CSS 文件，直到重新部署站点即可
核心概念
功能类优先
使用 Tailwind，可以通过直接在 HTML 中应用预定义的类来为元素添加样式
-
不需要再花费时间来自定义类名，尤其是为那些没有实际意义的容器添加样式的时候
-
使用传统方法，每次添加新功能时，CSS的体积会越来越大
有了实用程序，一切都是可重用的(CSS 模块化)，因此CSS体积增长到一定程度就会停止增长
使用传统的 CSS 样式系统时，每个样式都是独立的，值是随意选择的，这可能导致在应用程序的不同组件和页面中出现样式不一致和样式冲突的问题
-
而使用实用程序类可以确保所有样式都基于同一个设计系统，从而使整个应用程序中的元素和组件之间的样式值保持一致，提高样式的可重用性和可维护性
使开发者更加专注于应用程序的功能和业务逻辑，而不是样式的管理和调试
-
使用预定义的功能类在 HTML 中工作，修改感觉更加安全
传统的CSS是通过选择器来添加样式的，一个HTML元素可能被应用多个选择器，而这多个选择器之间你出现样式冲突
Tailwind使用功能类堆砌的方式为元素添加样式，这样大大减低了样式和样式之间的冲突问题
修饰符前缀
可以通过Tailwind CSS中的修饰符前缀来为元素设置在特定状态下存在的样式，也就是说可以使用修饰符前缀来为元素有条件的添加对应的样式
伪类
伪元素
before和after
使用before和after修饰符来为::before和::after伪元素设置样式
推荐只有在需要确保伪元素的内容不会实际呈现在DOM中且不可被用户选择的情况下，才使用before和after伪元素, 其余情况下使用真实的HTML元素来进行设置
<!--
默认情况下会为before和after设置content:''
除非需要指定content的值，否则可以不用设置content功能类，默认值是空字符串
ps: content的默认值是空字符串这个行为是Tailwind的预设基础样式(preflight)
如果关闭了preflight, 那么就需要显示指定content-['']
-->
<span class="after:content-['*'] after:ml-0.5"> Email</span>
placeholder
使用placeholder修饰符为任何输入框或文本框的占位文本设置样式
<input class="placeholder:text-slate-400" placeholder="Search for anything..." type="text"/>
响应式断点 (Responsive breakpoints)
黑夜模式
样式复用
Tailwind优先推荐使用编辑器的多光标功能和抽取组件的方式来管理需要重复编写的功能类集合
但是在某些特殊情况下，为了复用功能类集合而单独抽取组件可能会使代码显得过于臃肿
可以使用 Tailwind 提供的 @apply 指令，将重复的实用程序模式提取到自定义 CSS 类中，以减少代码的冗余和重复
但是需要注意的是，无论任何情况下，都不要仅仅为了让代码看起来“更整洁”而滥用 @apply
当在项目中大多数地方使用 @apply，那么基本上等于是编写原生的 CSS样式，也就是说相当于放弃了 Tailwind 的可维护性优势
所以推荐仅在不使用react，vue之类的框架的情况下，需要抽取重复使用的样式的时候，使用@apply
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
/* <button class="btn-primary" /> */
.btn-primary {
@apply py-2 px-4 bg-blue-500;
}
}
