順風 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：