Tailwind CSS 在响应式设计上的一些 pattern。主要的方法是利用它 提供 的各个 prefix。

针对不同屏幕大小设置不同字体大小、margin

<h1 class="mt-6 text-2xl sm:mt-8 sm:text-4xl lg:text-3xl">
  You can work from anywhere. 
</h1>

看运行的 实例。

在小屏幕隐藏，在大屏幕显示的 block

先置一个对所有屏幕大小生效的 hidden，再置大屏幕时为 display: block (lg:block)：

<div class="hidden lg:block">
  <img src="/img/beach-work.jpg">
</div>

看运行的 实例。

实现图片在不同屏幕下放在不同位置

这个 例子 演示了如何使海滩图片：

• 在小屏幕时置于下方
• 在大屏幕时置于右方