Span displays elements on same line in Tailwind CSS

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>

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