仅目标单个断点

Question

我有一个包含多个 div 的容器。仅在移动设备上，我希望所有卡片都有红色文本。仅在

sm

断点上，我希望所有

even

卡片都有蓝色文本。

我当前的代码是这样的：

问题是，在

sm

断点处，它仍然看到之前的红色。这在大多数情况下都很好，但在这种特定情况下，我需要让它看起来好像不存在一样。我可以用

sm:text-black

来对抗它，但这会变得很麻烦，就好像我也只想自定义

md

断点一样，然后我必须与

sm

对抗，等等到

lg

和

xl

。

我当前的代码在移动设备上生成了这个：

并在

sm

断点处生成：

问题是，当输入

sm

断点时，它会将之前红色的所有内容保留为红色。我希望这些恢复为默认值。

我希望

sm

，所有非偶数都将是这样的默认颜色：

Answer 1

您可以像这样显式定义：

<script src="https://cdn.tailwindcss.com"></script>
<section class="text-gray-600 body-font">
  <div class="container px-5 py-24 mx-auto">
    <div class="flex flex-wrap -m-4 ">
      <div class="p-4 lg:w-2/4">
        <div class="h-full bg-gray-100 bg-opacity-75 px-8 pt-16 pb-24 rounded-lg overflow-hidden text-center relative">
          <h2 class="tracking-widest text-xs title-font font-medium text-gray-400 mb-1">CATEGORY</h2>
          <h1 class="title-font sm:text-2xl text-xl font-medium mb-3 text-red-400 sm:even:text-black">Raclette Blueberry Nextious Level</h1>
          <p class="leading-relaxed mb-3">Photo booth fam kinfolk cold-pressed sriracha leggings jianbing microdosing tousled waistcoat.</p>
        </div>
      </div>
      <div class="p-4 lg:w-2/4">
        <div class="h-full bg-gray-100 bg-opacity-75 px-8 pt-16 pb-24 rounded-lg overflow-hidden text-center relative">
          <h2 class="tracking-widest text-xs title-font font-medium text-gray-400 mb-1">CATEGORY</h2>
          <h1 class="title-font sm:text-2xl text-xl font-medium mb-3 text-red-400 sm:even:text-blue-500">Ennui Snackwave Thundercats</h1>
          <p class="leading-relaxed mb-3">Photo booth fam kinfolk cold-pressed sriracha leggings jianbing microdosing tousled waistcoat.</p>
         
        </div>
      </div>
      <div class="p-4 lg:w-2/4">
        <div class="h-full bg-gray-100 bg-opacity-75 px-8 pt-16 pb-24 rounded-lg overflow-hidden text-center relative">
          <h2 class="tracking-widest text-xs title-font font-medium text-gray-400 mb-1">CATEGORY</h2>
          <h1 class="title-font sm:text-2xl text-xl font-medium text-red-400 mb-3 sm:even:text-black">Selvage Poke Waistcoat Godard</h1>
          <p class="leading-relaxed mb-3">Photo booth fam kinfolk cold-pressed sriracha leggings jianbing microdosing tousled waistcoat.</p>
        </div>
      </div>
      <div class="p-4 lg:w-2/4">
        <div class="h-full bg-gray-100 bg-opacity-75 px-8 pt-16 pb-24 rounded-lg overflow-hidden text-center relative">
          <h2 class="tracking-widest text-xs title-font font-medium text-gray-400 mb-1">CATEGORY</h2>
          <h1 class="title-font sm:text-2xl text-xl font-medium mb-3 text-red-400 sm:even:text-blue-500">Master Knuckle Raindogs</h1>
          <p class="leading-relaxed mb-3">Photo booth fam kinfolk cold-pressed sriracha leggings jianbing microdosing tousled waistcoat.</p>
         
        </div>
      </div>
    </div>
  </div>
</section>

Answer 2

您可以通过将

md

之类的响应修饰符与下一个断点的

max-*

修饰符堆叠起来来做到这一点。

<div class="md:max-lg:flex">
  <!-- ... -->
</div>

这里是文档：https://tailwindcss.com/docs/responsive-design#targeting-a-single-breakpoint