Tailwind：简介与响应式设计的基本原则

通俗理解：同一套页面（HTML/CSS/JS），可以适配不同的设备，包括移动设备和桌面设备。

针对不同设备分别设计页面，还是使用一套页面适合大部分设备？

—— 取决于项目需求和开发成本。

响应式设计的基本原则

• 除非你明确知道自己在做什么，否则不要使用 px 等绝对单位，而应该使用 rem、em 、% 、vh 和 vw 等相对单位。（如果你对 CSS 的相对单位不了解，请查看文档）
• 除非你明确知道自己在做什么，否则在布局时，不要 width 设置绝对宽度，而应该使用 max-width 设置最大宽度
• 图片/视频等是不会自动从父元素继承响应式设置的，需要手动给它们设置相对值的大小才能变成响应式

策略：移动设备优先和桌面设备优先

响应式布局有两种策略：移动设备优先和桌面设备优先。区别在于，在未指明断点时，CSS 针对的是移动设备还是桌面设备。

Tailwind 使用的是移动设备优先策略，即未指定断点时，适配移动设备；如果要对桌面设备进行特殊处理，需要使用断点。

你也可以将 Tailwind 应用到桌面设备优先策略

断点

所谓断点，就是将某些特殊的视口（viewport）大小，定义为一个点。当前视口大小在哪个断点范围内，就应用对应的 CSS。

sm -> md -> lg -> xl -> 2xl

在移动设备优先策略下，通常为手机等移动设备定义的 CSS 不加断点；为电脑等桌面设备定义的 CSS 加上 md 及以上的断点。

工具类 CSS 框架和组件类 CSS 框架

Tailwind 是工具类 CSS 框架：它将原生 CSS 使用简单、直观的 CSS 类进行封装，开发人员通过组合这些 CSS 类来实现不同的页面效果。

Bootstrap 等组件类 CSS 框架：直接提供已经封装好的组件，组件名就是 CSS 的类名，开发人员直接使用组件，就可以实现不同的页面效果。

凡是都有两面性：

关于 tailwind 的定制和扩展，将在后面章节详细讨论

安装 Tailwind

官方文档对各种安装方式都有详细介绍——详细到令人发指的每个步骤都写的清楚明白。

请确保你已经安装了Tailwind CSS IntelliSense，它不仅有代码提示和自动完成功能，当你把光标移到某个 Tailwind 类上面时，它还会显示原生的 CSS，简直是反向学习CSS的利器。