Span displays elements on same line in Tailwind CSS

user_14394648 0
Viewed 2893

I am displaying some code blocks in my NextJS project. A normal HTML file outside the Tailwind project displays each <span> item on a new line, but Tailwind CSS displays them on the same line without any breaks.

I want each of these <span> items on a new line in my code because they are easy to read, and the design looks better. However, I don't want to change their class names because there are many HTML files, and there would be a lot of repeating work for me.

Tailwind resets everything. I want to change the Tailwind styles to default ones. Is there any way to achieve this?

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

tailwind-css css html
3 Answers

A span tag is an inline level element, so it is expected behaviour for spans to be inline with each other.

I you want to make all your spans display on their own line (block level) then target the span tag and set it to display: block

span {
    display: block;
}
user_34472180

Your HTML is incorrect, it should be.

<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>

user_6334400

As someone pointed out, spans are inline objects by default so a "normal" HTML page wouldn't display spans on their own line unless one of its ancestors is forcing it or CSS for the spans are changing it up. Remember the rules when it comes to hierarchy as well, more specific takes precedence and so on so keep it in mind.

user_115006660
Related