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

【问题标题】：Tailwind CSS responsive breakpoint overrides not workingTailwind CSS 响应式断点覆盖不起作用
【发布时间】：2019-11-06 10:21:19
【问题描述】：

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

例如，我希望 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 项目中不起作用？

【问题讨论】：

什么是self-center？另外，你能显示你对父元素的类吗？您能否解释一下什么不起作用，即它总是左对齐还是居中……或者完全不同的东西？
你的问题不是关于覆盖断点。您的问题在于它的使用和实施。请更改您的问题标题。
第二行“标题文本”() 中有一个未闭合的 html 标记。我认为删除它不会有太大的不同。

标签： css laravel tailwind-css

【解决方案1】：

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

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

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

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

这样做：

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

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

【讨论】：

问题出在其他地方，可能在您的设置中。

【解决方案2】：

问题是：Tailwind 是一个移动优先的框架here，这意味着不带前缀的class props 将被用作移动样式，而前缀的样式（以sm开头，@987654324 @, lg) 将用于该屏幕断点及以上（NOT BELOW）

所以你的情况应该是相反的

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

【讨论】：

我现在明白了！几周来我一直在努力理解这些断点级联。谢谢！