Mobile First
其实跟不用 Tailwind 时，纯手写 CSS 的原则是一样的，那就是：
Mobile First
即，先写手机端的样式，然后逐一写更宽屏幕的样式。
而在 Tailwind CSS 中，Mobile First 就是先写不加 breakpoint (sm, md, lg …) 前缀的 class。
例如：
<img class="w-16 sm:w-20 md:w-32 lg:w-48" src="...">
sm breakpoint 的正确理解
Where this approach surprises people most often is that to style something for mobile, you need to use the unprefixed version of a utility, not the sm: prefixed version. Don’t think of sm: as meaning “on small screens”, think of it as “at the small breakpoint“.
容易引起误解的地方是，那些以 sm 为前缀的 class，总被认为是针对手机屏幕的样式。
实际上 sm 是针对 640px 以上宽度屏幕的情况。
sm 640px @media (min-width: 640px) { … }
所以，正确理解是，
- 不加前缀的才是针对所有尺寸屏幕
- 加了 sm 的，是针对稍大一点的屏幕，或比 small breakpoint 宽的情况
在线实现效果演示
https://www.sunzhongwei.com/tools2/combine-images
参考
关于作者 🌱
我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式