search results:

    • Standard
    • React
    Pricing Learn Community
    • + D
    • Light
    • Dark
    • System
    logo TW Elements
    • Getting started
      • Quick start
      • Tutorials
      • Design system
      • Local installation
      • Optimization
      • Dark mode
      • Theming
      • Changelog
      • Migrating to v2
      • Internationalization guide
      • Class customization
      • Icons Integration
    • CommercialNew
      • Pricing
      • License
      • Installation
      • Git & repository
      • Premium Support
    • Integrations
      • Angular
      • ASP.NET
      • Django
      • Express
      • Laravel
      • Next
      • Nuxt
      • Qwik
      • React
      • Remix
      • Solid
      • Svelte
      • SvelteKit
      • Vue
    • Content & styles
      • Animations
      • Animations Extended
      • Colors
      • Dividers
      • Figures
      • Headings
      • Hover effects
      • Icons
      • Images
      • Mask
      • Shadows
      • Typography
    • Navigation
      • Breadcrumbs
      • Footer
      • Headers
      • Mega menu
      • Navbar
      • Offcanvas
      • Pagination
      • Pills
      • Scrollspy
      • Sidenav
      • Tabs
    • Components
      • Accordion
      • Alerts
      • Avatar
      • Badges
      • Button group
      • Buttons
      • Cards
      • Carousel
      • Chips
      • Collapse
      • Dropdown
      • Gallery
      • Jumbotron
      • Lightbox
      • Link
      • List group
      • Modal
      • Notifications
      • Paragraphs
      • Placeholders
      • Popconfirm
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Stepper
      • Testimonials
      • Timeline
      • Toast
      • Tooltip
      • Video
      • Video carousel
    • Forms
      • Autocomplete
      • Checkbox
      • Datepicker
      • Datetimepicker
      • File input
      • Form templates
      • Input Group
      • Inputs
      • Login form
      • Multi range slider
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
      • Timepicker
      • Validation
    • Data
      • Charts
      • Charts advanced
      • Datatables
      • Tables
    • Methods
      • Clipboard
      • Infinite scroll
      • Lazy loading
      • Loading management
      • Ripple
      • Scrollbar
      • Smooth scroll
      • Sticky
      • Touch
    • Design Blocks
      • Admin Charts
      • Admin Complex
      • Admin Forms
      • Admin Maps
      • Admin Navigation
      • Admin tables
      • Banners
      • Contact
      • Content
      • CTA
      • FAQ
      • Features
      • Headers
      • Hero / Intro sections
      • Logo clouds
      • Mega menu
      • News
      • Newsletter
      • Pricing
      • Projects
      • Stats
      • Stats admin
      • Team
      • Testimonials
    • Tools
      • Button generator
      • Card generator
      • Flexbox generator
      • Footer generator
      • Form builder
      • Grid generator
      • Icon generator
      • Instagram Filters generator
      • Logo generator
      • Table generator
      • Typography generator
    • Coming Soon
      • Angular
      • Builder
      • Templates
      • Vue
    • Resources
      • Playground
      • YouTube Channel
      • Private FB Group
      • Newsletter
      • UI Design course New
      • UI / UX tips
    • Overview
    • Typography

    Paragraph spacing

    Tailwind CSS Paragraph spacing

    Use responsive paragraph spacing component with TW 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-{}.

    Without class .space-x-{}.

    Without class .space-x-{}.

    With class .space-x-{}.

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

    Related resources

    Typography Textarea Input Fields Center text Center text vertically and horizontally Display block Lettter spacing Text bold Text color Text decoration Text ellipsis Text size Text truncate Text wrap Vertically align text Spacing

    If you are looking for more advanced options, try typography from MDBootstrap.

    • Vertical space between paragraphs
    • Horizontal space between paragraphs
    • Related resources
    Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
    Join our mailing list now
    © 2024 Copyright: MDBootstrap.com

    Access restricted

    To view this section you must have an active PRO account

    Log in to your account or purchase an TWE subscription if you don't have one.

    Buy TWE PRO