TailwindCSS 是一款响应式的、移动设备优先的 CSS 工具类框架。本章对响应式布局、移动设备优先、断点等基本概念进行简要说明；并讨论几种安装 tailwind 的方式。
响应式设计
通俗理解：同一套页面（HTML/CSS/JS），可以适配不同的设备，包括移动设备和桌面设备。
针对不同设备分别设计页面，还是使用一套页面适合大部分设备？
—— 取决于项目需求和开发成本。
响应式设计的基本原则
- 除非你明确知道自己在做什么，否则不要使用
px等绝对单位，而应该使用rem、em、%、vh和vw等相对单位。（如果你对 CSS 的相对单位不了解，请查看文档） - 除非你明确知道自己在做什么，否则在布局时，不要
width设置绝对宽度，而应该使用max-width设置最大宽度 - 图片/视频等是不会自动从父元素继承响应式设置的，需要手动给它们设置相对值的大小才能变成响应式
策略：移动设备优先和桌面设备优先
Tailwind 使用的是移动设备优先策略，即未指定断点时，适配移动设备；如果要对桌面设备进行特殊处理，需要使用断点。
你也可以将 Tailwind 应用到桌面设备优先策略
断点
所谓断点，就是将某些特殊的视口（viewport）大小，定义为一个点。当前视口大小在哪个断点范围内，就应用对应的 CSS。
默认，Tailwind 提供了 5 个断点，从小到大分别是：
- 如果书写 CSS 时，没有指明断点，则所有设备都适用
- 如果书写 CSS 时，指明了断点，则该断点以及比它大的断点都适用
- 比如，指定了
lg断点，那么该 CSS 在屏幕大小为lg、xl和2xl的设备上都适用
- 比如，指定了
在移动设备优先策略下，通常为手机等移动设备定义的 CSS 不加断点；为电脑等桌面设备定义的 CSS 加上 md 及以上的断点。
工具类 CSS 框架和组件类 CSS 框架
Tailwind 是工具类 CSS 框架：它将原生 CSS 使用简单、直观的 CSS 类进行封装，开发人员通过组合这些 CSS 类来实现不同的页面效果。
Bootstrap 等组件类 CSS 框架：直接提供已经封装好的组件，组件名就是 CSS 的类名，开发人员直接使用组件，就可以实现不同的页面效果。
- 组件类框架：
- 可以让开发人员以极少的代码量快速制作页面；但做出来的页面千篇一律，使用 Bootstrap 等组件类 CSS 框架制作的页面基本都是一个样子，除非进行了深度定制
- 如果对某个组件不满意，只能通过
!important来覆盖框架预定义的样式；遇到复杂的组件，你还得无数次去尝试到底要覆盖哪些样式
- 工具类框架：
- 只提供了原生 CSS 的封装，并没有直接提供开箱即用的组件。开发人员需要自己通过组合这些封装的类，来实现所需的组件
- 高度的可定制，能自由发挥出自己的创意
- 多种定制和扩展方式
- 通过配置文件
- 通过CSS文件
- 最简单的方法，直接通过
类前缀-[具体值]的方式。比如，tailwindcss 并没有提供#7b1f00颜色，当我们想要使用这个颜色来设备背景色时，只需要：bg-[#7b1f00]
关于 tailwind 的定制和扩展，将在后面章节详细讨论
安装 Tailwind
官方文档对各种安装方式都有详细介绍——详细到令人发指的每个步骤都写的清楚明白。
请确保你已经安装了Tailwind CSS IntelliSense，它不仅有代码提示和自动完成功能，当你把光标移到某个 Tailwind 类上面时，它还会显示原生的 CSS，简直是反向学习CSS的利器。