Center the Container by Default in Tailwind

Tailwind “container” adjusts the max and min width of an HTML element. Like other CSS frameworks’ containers, it is not displayed at the “center” by default. The user needs to use the “mx-auto” utility to set it to the center every time it is used. To get rid of using an additional Tailwind utility to set the container at the center, specify its value “true” in the “theme.container” section of the main configuration file.

This article demonstrates the complete procedure to “center” the container by default in Tailwind.

How to Center the Container by Default in Tailwind?

To center the “container” by default, access the configuration file “tailwind.config.js” file and in the “theme” section, specify the key as “center” and the value as “true”.

Let’s perform the discussed concept practically.

Project File Structure

Before moving on to the practical implementation, first overview of the following file structure that is mandatory for using Tailwind CSS in the template file:

Step 1: Access the “tailwind.config.js” File

Navigate to the “tailwind.config.js” configuration file and specify the container section having the key-value pair “center: true”, as follows:

module.exports = {
content: ["./index.html"],
theme: {
container: {
center: true,
},
}

Press “Ctrl+S” to save the file.

Step 2: Associate the “container” Class With the HTML Element

Next, write an HTML code in the “index.html” file and use the “container” class with the desired HTML element. In this scenario, it is used with the “<div>” element:

<head>
<link href="/dist/output.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold text-center underline text-orange-600">Welcome to Linuxhint!</h1><br>
<div class="container text-white text-center font-bold bg-pink-600">Tutorial: Use Tailwind Container</div>
<body>

According to this code:

The “head” section links the main CSS file “/dist/output.css” with the existing HTML file “index.html” using the “<link>” tag.
The “body” section first defines the “<h1>” element that use the following Tailwind classes i.e., “Font Size” to apply the specified size, “Font Weight” to bold the text, “Text Align” to set the content in “center”, “Text Decoration” to underline the text, and “Text Color” to apply the specified color, respectively.
After that, a “div” is added using the “<div>” tag that applies the “container” class that fixes its maximum width to 100%.

Step 3: Output

Run the above HTML code to see the output:

As seen, the “container” is set at the “center” by default without using the margin class i.e., “mx-auto”.

Conclusion

To center the “container” by default in Tailwind CSS, edit the “tailwind.config.js” configuration file with the key-value pair “center: true”. This “key-value” pair should be added in the “theme” section of the configuration file. This article demonstrated the complete procedure to “center” the container by default in Tailwind.