Responsive Design using Tailwind CSS

20th August 2020 at 2:19pm
CSS: Responsive Design: Case Tailwind CSS: Pattern

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>

看运行的 实例

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

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

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