通常想要设计自适应页面的时候，需要使用media query，根据不同屏幕尺寸来定义对应的样式。在Tailwind中，我们不必自己定义这些细节，而是通过对应的CSS类来实现。下面介绍在Tailwind中，自适应类的使用。
Tailwind官网：https://tailwindcss.com/docs/responsive-design
关于Media Query对应的屏幕尺寸是这样定义的：
| CSS类前缀 | 最小宽度 | CSS |
|---|---|---|
| sm | 640px | @media (min-width: 640px) { … } |
| md | 768px | @media (min-width: 768px) { … } |
| lg | 1024px | @media (min-width: 1024px) { … } |
| xl | 1280px | @media (min-width: 1280px) { … } |
| 2xl | 1536px | @media (min-width: 1536px) { … } |
在Tailwind中使用自适应尺寸可以这样：
markup
<div class="text-red-300 sm:text-red-500 lg:text-red-700">这段代码意味着对于小屏幕手机，div颜色为red-300，但当屏幕大小>=640px时，div颜色就变为red-500了。当屏幕大小>=1024px的时候，div颜色变为red-700了。
这还可以和自适应一同使用：
markup
<div class="flex justify-center lg:justify-end">这就意味着默认情况下（小屏幕），div居中对齐，当屏幕尺寸 >= 1024px的时候，向右对齐。
我们甚至可以在br标签上应用responsive design：
markup
<br class="hidden lg:inline"/>
