7

我无法弄清楚为什么顺风的响应覆盖在我的项目中不起作用。

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

4

2 回答 2

7

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

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

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

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

做这个：

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

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

于 2019-06-24T15:20:10.340 回答
7

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

所以在你的情况下，它应该是相反的

class='text-left sm:text-center'
于 2021-02-06T07:53:58.570 回答