Logo
×

Tailwind CSS Padding

This class accepts a large number of values, and all of the properties are covered in class form. It's a replacement for the CSS Padding Property. This class is used to generate space inside any defined boundary around the element.

Different padding can be selected for each side (top, right, bottom, left). To implement padding properties, border properties must be included. CSS padding-top, CSS padding-bottom, CSS padding-right, CSS padding-left, and so on are all CSS padding properties.

Padding classes

  • p-0: The padding on all sides is defined by this class.
  • py-0: The padding-top and padding-bottom properties on the y-axis are defined by this class.
  • px-0: This class is used to specify x-axis padding, such as padding-left and padding-right.
  • pt-0: This class is used to provide padding to the top of the page.
  • pr-0: This class is used to add right-hand padding.
  • pb-0: This class is used to add padding to the bottom of the page.
  • pl-0: This class is used to add padding to the left side of the page.

Note: You can replace "0" with any of the allowed "rem" values.

p-0

The padding on all sides is defined by this class.

Syntax:

<element class="p-0">...</element>

Example:

<!DOCTYPE html>
<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
          rel="stylesheet">
</head>
<body class="text-center">
    <h1 class="text-red-600 text-5xl font-bold">
        Tutorial and Example
    </h1>
    <b>Padding Class - Tailwind CSS </b>
    <div class="flex justify-center">
    <div class="p-4 bg-red-300 w-24 h-24">
        <div class="border-2 border-red-800
                    bg-red-600 w-16 h-16">
             
        </div>
    </div>
    </div>
</body>
</html>

Output:

Tailwind CSS Padding

py-0

The padding-top and padding-bottom properties on the y-axis are defined by this class.

Syntax:

<element class="py-0">...</element>

Example:

<!DOCTYPE html>
<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
          rel="stylesheet">
</head>
<body class="text-center">
    <h1 class="text-red-600 text-5xl font-bold">
       Tutorial and Example
    </h1>
    <b>Padding Class - Tailwind CSS </b>
    <div class="flex justify-center">
    <div class="py-4 bg-red-300 w-24 h-24">
        <div class="border-2 border-red-800
                    bg-red-600 w-16 h-16">
             
        </div>
    </div>
    </div>
</body>
</html>

Output:

Tailwind CSS Padding

px-0

This class is used to specify x-axis padding, such as padding-left and padding-right.

Syntax:

<element class="px-0">...</element>

Example:

<!DOCTYPE html>
<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
          rel="stylesheet">
</head>
<body class="text-center">
    <h1 class="text-red-600 text-5xl font-bold">
       Tutorial and Example
    </h1>
    <b>Padding Class - Tailwind CSS </b>
    <div class="flex justify-center">
    <div class="px-4 bg-red-300 w-24 h-24">
        <div class="border-2 border-red-800
                    bg-red-600 w-16 h-16">
             
        </div>
    </div>
    </div>
</body>
</html>

Output:

Tailwind CSS Padding

pt-0

This class is used to provide padding to the top of the page.

Syntax:

<element class="pt-0">...</element>

Example:

<!DOCTYPE html>
<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
          rel="stylesheet">
</head>
<body class="text-center">
    <h1 class="text-red-600 text-5xl font-bold">
       Tutorial and Example
    </h1>
    <b>Padding Class - Tailwind CSS </b>
    <div class="flex justify-center">
    <div class="pt-4 bg-red-300 w-24 h-24">
        <div class="border-2 border-red-800
                    bg-red-600 w-16 h-16">
             
        </div>
    </div>
    </div>
</body>
</html>

Output:

Tailwind CSS Padding

pr-0

This class is used to add right-hand padding.

Syntax:

<element class="pr-0">...</element>

Example:

<!DOCTYPE html>
<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
          rel="stylesheet">
</head>
<body class="text-center">
    <h1 class="text-red-600 text-5xl font-bold">
       Tutorial and Example
    </h1>
    <b>Padding Class - Tailwind CSS </b>
    <div class="flex justify-center">
    <div class="pr-4 bg-red-300 w-24 h-24">
        <div class="border-2 border-red-800
                    bg-red-600 w-16 h-16">
             
        </div>
    </div>
    </div>
</body>
</html>

Output:

Tailwind CSS Padding

pb-0

This class is used to add padding to the bottom of the page.

Syntax:

<element class="pb-0">...</element>

Example:

<!DOCTYPE html>
<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
          rel="stylesheet">
</head>
<body class="text-center">
    <h1 class="text-red-600 text-5xl font-bold">
       Tutorial and Example
    </h1>
    <b>Padding Class - Tailwind CSS </b>
    <div class="flex justify-center">
    <div class="pb-4 bg-red-300 w-24 h-24">
        <div class="border-2 border-red-800
                    bg-red-600 w-16 h-16">
             
        </div>
    </div>
    </div>
</body>
</html>

Output:

Tailwind CSS Padding

pl-0

This class is used to add padding to the left side of the page.

Syntax:

<element class="pl-0">...</element>

Example:

<!DOCTYPE html>
<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
          rel="stylesheet">
</head>
<body class="text-center">
    <h1 class="text-red-600 text-5xl font-bold">
       Tutorial and Example
    </h1>
    <b>Padding Class - Tailwind CSS </b>
    <div class="flex justify-center">
    <div class="pl-8 bg-red-300 w-24 h-24">
        <div class="border-2 border-red-800
                    bg-red-600 w-16 h-16">
             
        </div>
    </div>
    </div>
</body>
</html>

Output:

Tailwind CSS Padding

Related Topics

Tailwind CSS Float

The float class acknowledges more than one worth (value) in tailwind CSS. It is an option in contrast to the CSS float property. The float class characterizes the progression of...

4 minutes read.

Tailwind CSS Position

The position class acknowledges more than one value in tailwind CSS. It is an option in contrast to the CSS Position property. This class is utilized for controlling how an...

5 minutes read.

Tailwind CSS Object Fit

It acknowledges more than one value in tailwind CSS. Every one of its properties is covered as in class form. It is the option in contrast to the CSS object-fit...

4 minutes read.

Tailwind CSS Align Self

This class accepts a wide range of values. It's a replacement for the CSS Align Self attribute. This class is used to control how a flex or grid item is...

4 minutes read.

Tailwind CSS Grid Column Start / End

This class accepts multiple values, and all of the properties are covered in class form. It was used as a replacement to the CSS grid-column property in CSS to express...

3 minutes read.

Tailwind CSS Object Position

It acknowledges more than one value in tailwind CSS. Every one of the properties is covered as in class form. It is the option in contrast to the CSS object-position...

2 minutes read.

Tailwind CSS Margin

The margin class accepts a large number of values, and all of the properties are covered in the same way they are in the class form. It's a replacement for...

6 minutes read.

Tailwind CSS Flex Shrink

CSS flexbox is an important element for frontend development. There are two flex-shrink options in Tailwind CSS, and all properties are covered in class form. For quick front-end development, it's...

3 minutes read.

Tailwind CSS Align Content

In Tailwind CSS, this class accepts a wide range of values. It's a replacement for the CSS Align Content feature. This class is used to modify the flex-wrap property's behavior....

5 minutes read.

Tailwind CSS Z-index

The tailwind CSS framework is a CSS utility framework that provides classes for managing HTML content with CSS. Tailwind CSS simplifies our design process and makes it responsive across numerous...

4 minutes read.

Tailwind CSS Max-Height

This class accepts a large number of values, and all of the properties are covered in class form. It's a replacement for the CSS Max-Height attribute. It is used to...

3 minutes read.

Tailwind CSS Opacity

This class accepts a lot of value, and all of the properties are covered in class form. We can change the opacity of any element by using this class. The...

1 minute read.

Tailwind CSS Installation

Here, we will discuss the installation method of Tailwind CSS using two strategies discussed as follows: Strategy 1: Install Tailwind through npm Step 1: npm init - y Step 2: npm install tailwindcss Step...

2 minutes read.

Tailwind CSS Place Items

This class accepts a wide range of values. It's a replacement for the CSS Place Items property. This class is used to manage how things are justified while still being...

4 minutes read.

Tailwind CSS Display

It acknowledges more than one worth in tailwind CSS. Every one of the properties is shrouded as in class structure. It is an option in contrast to the CSS display...

5 minutes read.

Tailwind CSS Container

In Tailwind CSS, a compartment is utilized to fix the maximum width (max-width) of a component to match the min-width of the breakpoint. It comes exceptionally convenient when content must...

2 minutes read.

Tailwind CSS Justify Content

In tailwind CSS, this class accepts two values. It's a replacement for CSS's justify-content attribute. This class is used to describe the flexible box container's alignment. Along the main axis...

4 minutes read.

Tailwind CSS tutorial

Tailwind CSS can be utilized to make sites in the quickest and the least demanding way. Tailwind CSS is the most famous utility-first CSS structure on the planet for quickly...

4 minutes read.

Tailwind CSS Overflow

The overflow class acknowledges more than one value in Tailwind CSS. It is an option in contrast to the CSS Overflow property. This overflow is for controlling how element content...

9 minutes read.

Tailwind CSS Visibility

In tailwind CSS, this class accepts two values. It's a replacement for the CSS visibility property. This class specifies whether an element in a web document is visible or not,...

2 minutes read.