Padding

    Add padding to a single side

    Control the padding on one side of an element using the utilities.

    For example, pt-6 would add 1.5rem of padding to the top of an element, pr-4 would add 1rem of padding to the right of an element, pb-8 would add 2rem of padding to the bottom of an element, and pl-2 would add 0.5rem of padding to the left of an element.

    Control the horizontal padding of an element using the px-{size} utilities.

    Padding - 图2

    1. <div class="px-8"><span class="bg-yellow-200">Target</span></div>

    Add vertical padding

    Control the vertical padding of an element using the py-{size} utilities.

    1. <div class="py-8"><span class="bg-yellow-200">Target</span></div>

    Control the padding on all sides of an element using the p-{size} utilities.

    Padding - 图4

    Responsive

    For more information about Tailwind’s responsive design features, check out the documentation.

    all

    Padding - 图6

    sm

    md

    Padding - 图8

    lg

    xl

    1. <div class="pt-8 sm:pr-6 md:pb-4 lg:pl-2 xl:p-0 ...">
    2. </div>

    Target

    By default Tailwind provides 19 fixed padding utilities for each side and axis.

    If you’d like to customize these values for padding, margin, width, and height all at once, use the theme.spacing section of your tailwind.config.js file.

    1.   // tailwind.config.js
    2.   module.exports = {
    3.     theme: {
    4.       spacing: {
    5. +       sm: '8px',
    6. +       md: '16px',
    7. +       lg: '24px',
    8. +       xl: '48px',
    9.       }
    10.     }
    11.   }

    To customize only the padding values, use the theme.padding section of your tailwind.config.js file.

    Learn more about customizing the default theme in the theme customization documentation.

    By default, only responsive variants are generated for padding utilities.

    You can control which variants are generated for the padding utilities by modifying the padding property in the section of your tailwind.config.js file.

    For example, this config will also generate hover and focus variants:

    1.   // tailwind.config.js
    2.     variants: {
    3.       // ...
    4. -     padding: ['responsive'],
    5. +     padding: ['responsive', 'hover', 'focus'],
    6.     }
    7.   }
    1.   // tailwind.config.js
    2.   module.exports = {
    3.     corePlugins: {
    4.       // ...
    5. +     padding: false,
    7.   }

      Margin →