在 Tailwind CSS 中，Span 在同一行显示元素答案

【问题标题】：Span displays elements on same line in Tailwind CSS在 Tailwind CSS 中，Span 在同一行显示元素
【发布时间】：2021-05-16 03:11:42
【问题描述】：

我正在我的 NextJS 项目中显示一些代码块。 Tailwind 项目之外的普通 HTML 文件将每个 <span> 项目显示在一个新行上，但 Tailwind CSS 将它们显示在同一行上而没有任何中断。

我希望<span> 中的每个 <span> 项目都在我的 code 的新行中，因为它们易于阅读，并且设计看起来更好。但是，我不想更改它们的类名，因为 HTML 文件很多，而且对我来说会有很多重复的工作。

Tailwind 会重置一切。我想将 Tailwind 样式更改为默认样式。有什么方法可以实现吗？

<div="container mx-auto">
  <div class="bash">
    <pre>
          <code>
              <span>$ ls</span>
              <span>cat /etc/passwd</span>
          </code>
    </pre>
  </div>
  </div>

【问题讨论】：

标签： html css tailwind-css

【解决方案1】：

span 标签是一个内联级元素，因此 span 的预期行为是相互内联的。

我想让你的所有跨度都显示在自己的行（块级别）上，然后定位跨度标签并将其设置为显示：块

span {
    display: block;
}

【讨论】：

【解决方案2】：

您的 HTML 不正确，应该是。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css">
<div class="container mx-auto">
    <div class="bash">
        <pre>
            <code>
                <span>$ ls</span>
                <span>cat /etc/passwd</span>
            </code>
        </pre>
    </div>
</div>

【讨论】：

【解决方案3】：

正如有人指出的那样，span 默认情况下是内联对象，因此“普通”HTML 页面不会在自己的行上显示 span，除非它的祖先之一强制它或 span 的 CSS 正在改变它。在涉及层次结构时也要记住规则，更具体的优先等等，所以请牢记。

【讨论】：