Tailwind CSS 响应式断点覆盖不起作用

Question

我不明白为什么顺风的响应覆盖在我的项目中不起作用。

例如，我希望 div 中的以下文本在小屏幕断点下方居中，并在 sm 断点上方左对齐。当我在Codepen中尝试时，以下代码似乎可以工作。然而，它在我的 laravel 项目中不起作用。

<div class="text-grey-4 flex-1 px-6 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>

有什么想法为什么这在我的 Laravel 项目中不起作用吗？

Answer 1

问题是：Tailwind 是一个移动优先框架，如下所示，这意味着无前缀的classprops 将用作移动样式，而带前缀的样式（以sm, md, 开头lg）将用于该屏幕断点及以上（不是以下）

所以在你的情况下应该是相反的方式

class='text-left sm:text-center'

Answer 2

每次使用 Tailwind 进行设计时，都从移动设备开始。

<div class="text-center sm:text-left">
  Lorem ipsum dolor sit amet.
</div>

基本上就这个例子而言。而不是说：

文本应仅在较小的设备上居中。

做这个：

文本应始终居中，并针对较大的设备向左对齐。

https://codepen.io/anon/pen/wLeoYV

Answer 3

如果要覆盖tailwind.config.js文件中的默认断点，请务必遵循值的升序screens（从最小到最大视口）：

module.exports = {
  theme: {
    screens: {
      'sm': '576px',
      'md': '960px',
      'lg': '1440px',
    },
  }
}

这很重要，因为 CSS 级联将以相同的顺序创建。较大的断点将覆盖较小的断点。