TailwindCSS响应式
比特聚客 2022-02-02 vue
# tailwindcss 作为响应式布局
tailwindcss 作为 css 框架tailwindcss 的响应式断点设置非常灵活，可以满足我们的需求。使用断点工具类，可以避免在写大量的媒体查询 css,使用下来发现还是非常方便的。下面，我就来介绍一下我是如何基于 tailwindcss 去做一套多端自适应的布局方案的。
# 使用单位
- sm:
- md:
- lg:
- xl:
- 2xl:
<div class="max-w-sm mx-auto h-20 rounded-xl bg-green-50 sm:bg-green-100 md:bg-green-200 lg:bg-green-300 xl:bg-green-400 2xl:bg-green-500"></div>
</div>