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

TailwindCSS 是一款响应式的、移动设备优先的 CSS 工具类框架。本章对响应式布局、移动设备优先、断点等基本概念进行简要说明；并讨论几种安装 tailwind 的方式。

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

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

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

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

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

响应式设计的基本原则

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

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

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

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

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

断点

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

默认，Tailwind 提供了 5 个断点，从小到大分别是：

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

• 如果书写 CSS 时，没有指明断点，则所有设备都适用
• 如果书写 CSS 时，指明了断点，则该断点以及比它大的断点都适用
  • 比如，指定了 lg 断点，那么该 CSS 在屏幕大小为 lg、xl 和 2xl 的设备上都适用

• 比如，指定了 lg 断点，那么该 CSS 在屏幕大小为 lg、xl 和 2xl 的设备上都适用

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

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

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

凡是都有两面性：

• 可以让开发人员以极少的代码量快速制作页面；但做出来的页面千篇一律，使用 Bootstrap 等组件类 CSS 框架制作的页面基本都是一个样子，除非进行了深度定制
• 如果对某个组件不满意，只能通过 !important 来覆盖框架预定义的样式；遇到复杂的组件，你还得无数次去尝试到底要覆盖哪些样式

• 通过配置文件
• 通过CSS文件
• 最简单的方法，直接通过 类前缀-[具体值] 的方式。比如，tailwindcss 并没有提供 #7b1f00 颜色，当我们想要使用这个颜色来设备背景色时，只需要：bg-[#7b1f00]

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

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

安装 Tailwind

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

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