Question

我不知道为什么顺风的响应式替代在我的项目中不起作用。

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

<div class="text-grey-4 flex-1 px-6 sm:text-left text-center self-center">

    <h2 class="h2">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 是一个移动优先的框架，如 here，这意味着不带前缀的 class 道具将用作移动样式，而带前缀的样式（以 {{ 开头） 1}}、sm、md) 将用于该屏幕断点及以上（不低于）

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

lg

Answer 2

我遇到了一些问题，我看不到正在应用的断点类。我不得不停止并重新启动我的 Angular 编译手表以查看由于某种原因应用的更改。我正在使用仍处于预览状态的顺风 JIT 选项，这可能是原因：警告 - 您已启用当前处于预览状态的 JIT 引擎。警告 - semver 未涵盖预览功能，可能会引入重大更改，并且可以随时更改。

Answer 3

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

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

所以基本上在这个例子中。不用说：

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

执行以下操作：

文本应始终居中，并向左对齐以使用更大的设备。

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

Tailwind CSS响应断点替代无法正常工作

3 个答案: