Tailwind 简介
Tailwind 是一个 CSS UI 框架，它最大的特点是遵循基础/通用类优先 utility-first 的原则，它只提供了基础的工具类 utility classes（如内边距 padding、字体 text 和 font、动效 transition 等预设类），可以让你直接在 HTML 源码上使用这些基础类，通过编译器的编译，生成相应的样式表，从而为页面设置相应的外观样式。
Tip
目前主流的 UI 框架，如 Bootstrap，直接提供现成的组件 components（如按钮 buttons、卡片 cards 等组件），虽然可以快速地使用框架提供的组件 HTML 模板进行页面构建，但是由于组件的样式一般都预设并封装起来，因此使用这些框架进行定制化高的网页构建反而会很麻烦和困难，因为使用这些 UI 框架设计的网页都很相似。
Tailwind 没有提供现成的组件，只提供各种通用的样式类，开发者可以通过这些底层 low level 的基础的类 class 的「叠加组合」可以构建高度定制化的网站。除了使用内置的通用类，Tailwind 还支持使用配置文件 tailwind.config.js 增添自定义的基础类或修改覆盖原有的基础类
虽然 Tailwind 在 HTML 标签中添加各种基础类 class 的方式和内嵌样式 inline-style 类似，但很多方面都不同让样式管理更方便：
- 支持使用伪类，如
hover:bg-gray-500，设置鼠标悬停在元素时改变背景色。这些都是 inline-style 无法实现的 - 支持响应式设计，如
md:text-lg，设置在 breakpoint 为768px时字体样式 - 支持使用
@apply指令，将多个常用的类组合，移动到 CSS 样式表中，让 HTML 模板更「清爽」
Tip
虽然使用 Tailwind 给人第一感觉是让 HTML 的代码变得冗长而眼花缭乱，但是这些基础类的组合都是有语义的，例如 font-bold 类是粗体（实际编译为 CSS 代码是 font-weight: 700;），而 font-light 类则表示细体（实际编译为 CSS 代码是 font-weight: 300;），我们可以直观地在 HTML 中使用这些「声明式」的类给元素设定样式，然后在后续的维护中，直接从 HTML 文档就知道相应的元素究竟是设置了何种样式，而不需要跳去翻样式表文件，这个开发流程是十分「顺滑」直观的。
Warning
Tailwind CSS v3.0 是设计理念是使用最新的 Web 开发技术，所以测试采用的都是最新的浏览器，对于 IE 等旧版本的浏览器，可能并不能得到友好支持。此外还可以将 Tailwind 作为 PostCSS 的插件来使用，并在 PostCSS 最后使用 autoprefixer 插件为特定的样式自动添加前缀，这样也可以在一定程度上让样式表适用性更广（如果使用 Tailwind CLI 编译生成样式表，也会自动生成前缀）。
相关资源
- Tailwind CSS 官网
- Tailwind CSS 文档
- Tailwind Labs 官方推出的 VS Code 插件 Tailwind CSS IntelliSense 提供 Tailwind 内置基础类的代码提示和自动补全功能。
tailwind-css-intellisense Tip
需要项目中有
tailwind.config.js配置文档才启用，可以在终端输入npx tailwindcss init创建该配置文件。Tip
因为 Tailwind 会在样式表中使用一些自定义的指令，如
@tailwind、@apply等，可能会触发编辑器的代码检查警告/错误提示，解决方法一般是安装相应的插件，例如 VS Code 有一个插件 PostCSS Language Support 可以让编辑器支持其他 postcss 语法。如果在项目中，编辑器依然对 Tailwind 的指令报错，可以检查代码检查工具是否开启了严格 strict 模式，并进行调整。 - Tailwind Labs 官方 Youtube 频道 有大量的视频教程