# TailwindCSS 下的响应式设计

- Link: https://www.ixiqin.com/2022/03/22/tailwindcss-response-under-the-design/
- Published: 2022-03-22T06:00:00+08:00
- Author: 白宦成

文章目录

 [Toggle](https://www.ixiqin.com/2022/03/22/tailwindcss-response-under-the-design/#)

 * [前言](https://www.ixiqin.com/2022/03/22/tailwindcss-response-under-the-design/#%e5%89%8d%e8%a8%80)
 * [正文](https://www.ixiqin.com/2022/03/22/tailwindcss-response-under-the-design/#%e6%ad%a3%e6%96%87)
    - [设计理念](https://www.ixiqin.com/2022/03/22/tailwindcss-response-under-the-design/#%e8%ae%be%e8%ae%a1%e7%90%86%e5%bf%b5)
    - [断点（breakpoint）的作用](https://www.ixiqin.com/2022/03/22/tailwindcss-response-under-the-design/#%e6%96%ad%e7%82%b9%ef%bc%88breakpoint%ef%bc%89%e7%9a%84%e4%bd%9c%e7%94%a8)
    - [自定义断点](https://www.ixiqin.com/2022/03/22/tailwindcss-response-under-the-design/#%e8%87%aa%e5%ae%9a%e4%b9%89%e6%96%ad%e7%82%b9)
 * [总结](https://www.ixiqin.com/2022/03/22/tailwindcss-response-under-the-design/#%e6%80%bb%e7%bb%93)
 * [延展阅读](https://www.ixiqin.com/2022/03/22/tailwindcss-response-under-the-design/#%e5%bb%b6%e5%b1%95%e9%98%85%e8%af%bb)

## 前言

我自己在最近的一段时间里，整体是比较喜欢 TailwindCSS 这类样式框架的，它可以非常灵活
的定义样式，从而可以十分方便的进行创意类的 UI 设计，实现一些独特的 UI 特性。不过，
由于我并非一个专业的前端，也不曾研究过响应式设计。这让我在进行前端开发过程中，吃
尽了苦头。

痛定思痛，认真的学习了一下 TailwindCSS 下的响应式设计，为以后的开发做好准备。磨刀
不误砍柴工嘛。

## 正文

### 设计理念

在进行 TailwindCSS 下的响应式设计时，需要考虑到其整个设计系统的基础 —— **Mobile 
First**（移动优先）。

基于移动优先的理念并不新奇，诸如 Bootstrap 之类的框架早已经教会我们移动优先。

> **Mobile first, responsive design is the goal**.
> Bootstrap

在这种设计理念上，我们应该做的是先设计移动端的样式，并根据屏幕的不断扩张，变成一个
更加丰富的 UI 和界面。

这一点对于做研发的我来说，是一个非常反直觉的事情：在绝大多数场景下，我在开发产品
的时候，都是看到的桌面端的样式 & 功能，我下意识的以为，桌面端才是应该首要设计的界面。
但**无论是 Bootstrap，还是 TailwindCSS，其实都是首要设计移动端的**。

![](https://files.ixiqin.com/2022/03/23082711/d2b5ca33bd970f64a6301fa75ae2eb22-7-
1024x303.png)

理念的变化没有跟上，导致我对于 TailwindCSS 的类样式的理解不到位，在设计时会出现错误。

### 断点（breakpoint）的作用

在进行响应式开发的时候，断点是非常重要的，借助于 CSS 3 提供的 Media Query，我们得以
在不同的样式尺寸下应用不同的样式设计。

而在 TailwindCSS 当中，根据最小屏幕宽度（为什么是最小而不是最大？因为默认应用在移动
设备上，更大的尺寸使用 Media Query 来控制）默认提供了 5 组不同的断点，分别是 sm(
640px)、md(768px)、lg(1024px)、xl(1280px)、2xl(1536px)，以及不加任何断点情况下的
default 样式。

对于绝大多数的应用来说，处理好 default（手机）、md（平板）和 lg（PC），就已经足够，
对于一些面向更 Geek 的场景（比如开发者），他们使用的设备性能和参数更高，可以再定向
配置 xl 和 2xl 的样式。

### 自定义断点

在实际开发过程中，根据用户的场景的不同，TailwindCSS 的默认断点可能并不能满足你的
诉求，这种情况下，你还可以根据自己的需要，修改默认的断点的配置（甚至是将其从移动
优先调整为 PC 优先：将 min-width 模式调整为 max-width 即可）。

具体可以参考 [TailwindCSS Customize Screen Size](https://tailwindcss.com/docs/screens)。

## 总结

在 Tailiwind CSS 下进行响应式开发时，切记从小到大，而非从大到小，不然会让你调试样式
的时候十分痛苦。

## 延展阅读

 * [Bootstrap Breakpoints](https://getbootstrap.com/docs/5.1/layout/breakpoints/)
 * [TailwindCSS Responsive Design](https://tailwindcss.com/docs/responsive-design)
 * [Tailwind CSS初体验之响应式设计](https://www.wjcms.net/archives/tailwindcss%E5%88%9D%E4%BD%93%E9%AA%8C%E4%B9%8B%E5%93%8D%E5%BA%94%E5%BC%8F%E8%AE%BE%E8%AE%A1)