Paragraph spacing

Tailwind CSS Paragraph spacing

Use responsive paragraph spacing component with Tailwind Elements. Quick and easy way to set a space between paragraphs.

Vertical space between paragraphs

Use .space-y-{amount} class to set the vertical space between paragraphs.

Blissful sunset, serenity whispers, nature's masterpiece unfolds.

Laughter echoes, friendships bloom, joy fills the air.

Timeless love, gentle embrace, hearts entwined forever.

HTML

        
            
        <div class="flex flex-col space-y-8">
          <p>...</p>
          <p>...</p>
          <p>...</p>
        </div>

Horizontal space between paragraphs

Use .space-x-{amount} class to set the horizontal space between paragraphs.

Without class .space-x-{}.

With class .space-x-{}.

HTML

        
            
        <div class="flex">
          <p>Without class .space-x-{}.</p>
          <p>Without class .space-x-{}.</p>
          <p>Without class .space-x-{}.</p>
        </div>
        <div class="flex space-x-8">
          <p>With class .space-x{}.</p>
          <p>With class .space-x{}.</p>
          <p>With class .space-x{}.</p>
        </div>

Paragraph spacing

Tailwind CSS Paragraph spacing

Vertical space between paragraphs

Horizontal space between paragraphs

Related resources