顺风 CSS 断点

Question

我不明白为什么 tailwind css 的响应断点在我的项目中不起作用。

假设，我想在我的父 div 中添加一些填充，并希望在 md 和 lg 屏幕尺寸上将其最小化，但它不起作用。

<div class="text-grey-4 flex-1 lg:px-6 md:px-4 px-0 sm:text-left text-center self-center"><h2 class="h2"><b>Heading Text</b></h2><div> Lorum ipsum lorum ispum lorum ipsum Lorum ipsum lorum ispum lorum ipsum Lorum ipsum lorum ispum lorum ipsum</div></div>

Answer 1

Tailwind-css遵循mobile-first断点系统。

添加的任何默认样式都将被考虑用于mobile设备，而用于medium和large设备的类需要单独指定。

考虑以下代码：

<div class="py-2 md:py-32 lg:py-64 text-4xl">
  <h1>Hello</h1>
</div>

移动设备中的 Output：

Output 中型设备：

大型设备中的 Output：