Logo
×

Tailwind CSS Place Content

This class accepts a wide range of values. It's a replacement for the CSS Place Content property. This class is used to manage how information is justified while still being aligned. To change the values of several properties in a single class, the align-content and justify-content class values can be stored in the place-content class.

Place Content Classes

The classes are as follows:

  • place-content-center
  • place-content-start
  • place-content-end
  • place-content-between
  • place-content-around
  • place-content-evenly
  • place-content-stretch

place-content-center

The place-content-center class aligns flex elements in the container's centre.

Syntax:

<element class="place-content-center">...</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>Place Content Class - Tailwind CSS </b>
    <div id="main" class="ml-24 h-48 w-2/3 grid grid-cols-3 gap-2
                          place-content-center
                          h-48 bg-red-200 border-solid border-4
                          border-red-900">
        <div class="bg-red-900 w-3/4 h-12">1</div>
        <div class="bg-red-800 w-3/4 h-12">2</div>
        <div class="bg-red-700 w-3/4 h-12">3</div>
        <div class="bg-red-600 w-3/4 h-12">4</div>
        <div class="bg-red-500 w-3/4 h-12">5</div>
        <div class="bg-red-400 w-3/4 h-12">6</div>
    </div>
</body>
</html>

Output:

Tailwind CSS Place Content

place-content-start

The place-content-start class aligns flex items at the container's start.

Syntax:

<element class="place-content-start">...</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>Place Content Class - Tailwind CSS </b>
    <div id="main" class="ml-24 h-48 w-2/3 grid grid-cols-3 gap-2
                          place-content-start
                          h-48 bg-red-200 border-solid border-4
                          border-red-900">
        <div class="bg-red-900 w-3/4 h-12">1</div>
        <div class="bg-red-800 w-3/4 h-12">2</div>
        <div class="bg-red-700 w-3/4 h-12">3</div>
        <div class="bg-red-600 w-3/4 h-12">4</div>
        <div class="bg-red-500 w-3/4 h-12">5</div>
        <div class="bg-red-400 w-3/4 h-12">6</div>
    </div>
</body>
</html>

Output:

Tailwind CSS Place Content

place-content-end

The place-content-end class aligns flex items at the container's end.

Syntax:

<element class="place-content-end">...</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>Place Content Class - Tailwind CSS </b>
    <div id="main" class="ml-24 h-48 w-2/3 grid grid-cols-3 gap-2
                          place-content-end
                          h-48 bg-red-200 border-solid border-4
                          border-red-900">
        <div class="bg-red-900 w-3/4 h-12">1</div>
        <div class="bg-red-800 w-3/4 h-12">2</div>
        <div class="bg-red-700 w-3/4 h-12">3</div>
        <div class="bg-red-600 w-3/4 h-12">4</div>
        <div class="bg-red-500 w-3/4 h-12">5</div>
        <div class="bg-red-400 w-3/4 h-12">6</div>
    </div>
</body>
</html>

Output:

Tailwind CSS Place Content

place-content-between

This class spreads the space between flex lines evenly.

Syntax:

<element class="place-content-between">...</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>Place Content Class - Tailwind CSS </b>
    <div id="main" class="ml-24 h-48 w-2/3 grid grid-cols-3 gap-2
                          place-content-between
                          h-48 bg-red-200 border-solid border-4
                          border-red-900">
        <div class="bg-red-900 w-3/4 h-12">1</div>
        <div class="bg-red-800 w-3/4 h-12">2</div>
        <div class="bg-red-700 w-3/4 h-12">3</div>
        <div class="bg-red-600 w-3/4 h-12">4</div>
        <div class="bg-red-500 w-3/4 h-12">5</div>
        <div class="bg-red-400 w-3/4 h-12">6</div>
    </div>
</body>
</html>

Output:

Tailwind CSS Place Content

place-content-around

The place-content-around class evenly distributes space around the flex lines.

Syntax:

<element class="place-content-around">...</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>Place Content Class - Tailwind CSS </b>
    <div id="main" class="ml-24 h-48 w-2/3 grid grid-cols-3 gap-2
                          place-content-around
                          h-48 bg-red-200 border-solid border-4
                          border-red-900">
        <div class="bg-red-900 w-3/4 h-12">1</div>
        <div class="bg-red-800 w-3/4 h-12">2</div>
        <div class="bg-red-700 w-3/4 h-12">3</div>
        <div class="bg-red-600 w-3/4 h-12">4</div>
        <div class="bg-red-500 w-3/4 h-12">5</div>
        <div class="bg-red-400 w-3/4 h-12">6</div>
    </div>
</body>
</html>

Output:

Tailwind CSS Place Content

place-content-evenly

This class specifies a position with equal spacing between them, but with different spacing from the corners.

Syntax:

<element class="place-content-evenly">...</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>Place Content Class - Tailwind CSS </b>
    <div id="main" class="ml-24 h-48 w-2/3 grid grid-cols-3 gap-2
                          place-content-evenly
                          h-48 bg-red-200 border-solid border-4
                          border-red-900">
        <div class="bg-red-900 w-3/4 h-12">1</div>
        <div class="bg-red-800 w-3/4 h-12">2</div>
        <div class="bg-red-700 w-3/4 h-12">3</div>
        <div class="bg-red-600 w-3/4 h-12">4</div>
        <div class="bg-red-500 w-3/4 h-12">5</div>
        <div class="bg-red-400 w-3/4 h-12">6</div>
    </div>
</body>
</html>

Output:

Tailwind CSS Place Content

place-content-stretch

This class defines a line that is stretched to fill the flex container's remaining space. It's the default setting.

Syntax:

<element class="place-content-evenly">...</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>Place Content Class - Tailwind CSS </b>
    <div id="main" class="ml-24 h-48 w-2/3 grid grid-cols-3 gap-2
                          place-content-stretch
                          h-48 bg-red-200 border-solid border-4
                          border-red-900">
        <div class="bg-red-900 w-3/4">1</div>
        <div class="bg-red-800 w-3/4">2</div>
        <div class="bg-red-700 w-3/4">3</div>
        <div class="bg-red-600 w-3/4">4</div>
        <div class="bg-red-500 w-3/4">5</div>
        <div class="bg-red-400 w-3/4">6</div>
    </div>
</body>
</html>

Output:

Tailwind CSS Place Content

Related Topics

Tailwind CSS Justify Self

The class form goes over the various properties. It's a replacement for the CSS justify-self attribute. This class is used to describe the alignment of content’s position in a CSS...

4 minutes read.

Tailwind CSS Order

One of the best features of Tailwind CSS is the Order class, which allows us to order flex and grid objects according to our needs. There are several different order...

2 minutes read.

Tailwind CSS Fill

The CSS Fill class accepts a lot of value, and all of the properties are covered in class form. It is a presentation attribute that controls how an SVG shape's...

1 minute read.

Tailwind CSS Grid Template Columns

In tailwind CSS, this class accepts multiple values, and all of the properties are covered in class form. It's the CSS grid-template-columns property's replacement. It's used to specify the number...

2 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 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 Grid Auto Flow

In tailwind CSS, this class accepts multiple values, and all of the properties are covered in class form. It is a CSS alternative. The grid-auto-flow property is used in Tailwind...

4 minutes read.

Tailwind CSS Flex Direction

CSS flexbox is an important element for frontend development. CSS has four directions, therefore in tailwind CSS, all of the properties are covered in class form. It's a front-end development...

5 minutes read.

Tailwind CSS Align Items

In tailwind CSS, this class accepts a wide range of values. It's a replacement for the CSS Align Items attribute. This class is used to align things within the flexible...

5 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.

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 Top / Right / Bottom / Left

In tailwind CSS, these classes take a variety of values and cover all of the characteristics in the class form. These are the CSS Top/Right/Bottom/Left properties' replacements. These classes are...

4 minutes 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 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 Space Between

In tailwind CSS, 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 Space Between property....

4 minutes read.

Tailwind CSS Gap

In tailwind CSS, this class accepts multiple values, and all of the properties are covered in class form. It's a replacement for the CSS gap attribute. This class is used...

4 minutes read.

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

4 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 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 Min-Height

In tailwind CSS, 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 Min-Height Property. It...

2 minutes read.