TailwindCSS 从零开始 - 手机到桌上萤幕，所有的元素都能自适应

跟 Bootstrap 一样也是手机优先的响应式断点设计，官方文件也提供尺寸对照：

让前端在开发轻松在 HTML 上写断点，不用特别去 CSS 撰写了。

直观又好懂的断点写法

我可以透过 断点:条件 的方式来撰写断点，例如：

<img class="w-16 md:w-32 lg:w-48" src="...">

这一段是表示：

• 手机图片宽度为 16rem
• 平板图片宽度为 32rem
• 桌机图片宽度为 48rem

demo: https://codepen.io/hnzxewqw/pen/XWMPEZp

官方推荐是从小到大的断点依序撰写，好读又直观，当然想要随意换顺序也可以，但为了以後维护，还是有顺序的写会比较好。

不只单元素，合体技也可以

demo: https://codepen.io/hnzxewqw/pen/WNpgzgb

Tailwind 因为可以自由控制元素达到响应式的效果，所以上方范例手机板看起来是一张卡片，但手机板以上就会成横幅的排版，这时候就可以看得出来此弹性的优势别於元件型框架的差别。可以自由地做成任何想要的排版，我觉得这部份真的非常棒，不用受限於元件库的限制了。

想要做卡片、弹窗，还是其他常见的元件，似乎都可以透过 Utility-First 来完成。

不需要针对手机板使用断点

有提到 Tailwind 是手机优先开始撰写，所以手机板不需要使用前缀词，不要误用 sm 是手机萤幕大小，sm 的预设断点为 640px 喔！官方范例为：

<div class="sm:text-center"></div>

正确的写法为：

<div class="text-center sm:text-left">这是一段文字</div>

上方的写法意思是，在手机板的时候文字居中，解析度 640px 以上时，文字靠左。

demo: https://codepen.io/hnzxewqw/pen/PopdRvr

单一断点导向

Tailwind 的断点只有 min-width，没有 max-width ，这代表我都是要从手机板出发来写断点，如果我只想在某个元素使用断点，我只需要在更大的断点上写我要的内容，就会覆盖前一个断点的内容，比如说下方范例：

demo: https://codepen.io/hnzxewqw/pen/PopdRvr
我有一个方块，在手机板的时候要靠左，并且是蜜桃色的，但随着萤幕尺寸的变化，会慢慢变成不同的颜色，甚至到最大的断点时，可以设定让方块靠右对齐。

透过断点达到想呈现的效果就是这麽容易。

客制化断点

Tailwind 的优点就是可以自由的客制化，假如预设的断点比较不符专案使用，也可以透过 tailwind.config.js 去设定想要的断点喔！断点的前缀词可以自订义。

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      // => @media (min-width: 640px) { ... }

      'laptop': '1024px',
      // => @media (min-width: 1024px) { ... }

      'desktop': '1280px',
      // => @media (min-width: 1280px) { ... }
    },
  }
}

参考资料

• Tailwind CSS - Breakpoints