Tailwind CSS 响应式断点在 text-center 和 text-left 上不起作用答案

【问题标题】：Tailwind CSS responsive breakpoint not working on text-center and text-leftTailwind CSS 响应式断点在 text-center 和 text-left 上不起作用
【发布时间】：2022-11-13 12:08:07
【问题描述】：

嗨，我是学习顺风 css 的新手。我的代码行是

&lt;h1 className="text-center sm:text-left"&gt;Hello world&lt;/h1&gt;

这意味着“hello world”应该位于移动断点的中心，并且应该在 sm 或更高的断点上向左。但是“Hello world”仍然在所有断点的中心，为什么？我错过了什么吗？并感谢您的帮助。

【问题讨论】：

不可重现：play.tailwindcss.com/jIeyHfzKco 但迈克所写的内容可能是您的原因。

标签： responsive tailwind-css

【解决方案1】：

我提到这个，纯粹是因为我过去某个时候发生过它。

您正在使用 className 作为 HTML 上的属性，现在您可以使用 react 或其他一些框架，但如果这是原始 HTML，则您不能这样做，而必须改用 class。

请改用以下内容：

<h1 class="text-center sm:text-left">Hello world</h1>

【讨论】：

【解决方案2】：

一切看起来都很好，请看

<script src="https://cdn.tailwindcss.com"></script>
<h1 class="text-center sm:text-left">Hello world</h1>

注意两点，

查看bg-red-400 或text-blue-800 等其他类是否正常工作。如果不是，则顺风无法正常工作。
看看你是否使用了任何 JS 框架（React、Next、Nuxt）然后className 很好，但是如果你使用的是纯 HTML，那么只用class 替换它。

【讨论】：

【解决方案3】：

这个答案可能有点晚了，但您可能误解了断点如何与 Tailwind 一起工作（当我开始使用 Tailwind 时，我也感到困惑）。基本上，当您设置带有断点的样式时，例如：

<h1 className="text-center sm:text-left">Hello world</h1>

发生的事情是从 md 断点开始向上, 一切都将留有文字。所以在 md、lg、xl 等上，它会有 text-left。

【讨论】：