前言

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

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

正文

设计理念

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

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

Mobile first, responsive design is the goal.

Bootstrap

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

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

理念的变化没有跟上，导致我对于 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。

总结

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

延展阅读

• Bootstrap Breakpoints
• TailwindCSS Responsive Design
• Tailwind CSS初体验之响应式设计

在我们实际开发的时候，我们可能会希望打印展示的效果和浏览器看到的效果不同。这个时候我们如何实现控制？你可以借助于 tailwind 的自定义 screen 类的方式来实现。

配置 tailwind.config.js

在 tailwind 中添加 theme 配置，设定一个拓展的screen 为print。

module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend:{
      screens:{
         'print': {'raw': 'print'},
      }
    }
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Code language: JavaScript (javascript)

使用 print:invisible 控制显示

配置了 screen 以后，你就可以在编写样式的时候，使用 print:classname的方式，来控制在打印状态下展示的内容。