Tailwindmarkup~30 mins

Container utility for centering in Tailwind - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Centering Content with Tailwind CSS Container Utility

📖 Scenario: You are building a simple webpage where the main content should be nicely centered horizontally on the screen. This is a common layout pattern for blogs, portfolios, and many websites.

🎯 Goal: Create a webpage with a centered container using Tailwind CSS's container utility. The container should have some padding and a background color so it is easy to see the centered area.

📋 What You'll Learn

Use the Tailwind CSS container utility to center content horizontally

Add horizontal padding inside the container

Add a background color to the container to highlight it

Use semantic HTML5 elements

Ensure the page is responsive and the container adjusts width on different screen sizes

💡 Why This Matters

🌍 Real World

Centering content inside a container is a common layout pattern for websites, blogs, and portfolios to improve readability and design.

💼 Career

Understanding how to use Tailwind CSS utilities like container and spacing classes is important for front-end developers to build responsive and accessible web pages quickly.

Progress0 / 4 steps

Create the basic HTML structure

Write the basic HTML5 skeleton with lang="en", meta charset="UTF-8", and viewport meta tag. Inside the <body>, add a <main> element with the text "Hello, Tailwind!".

Tailwind




  
  
  Centering with Tailwind

Need a hint?

Start with a simple HTML page structure and add a <main> tag with the text inside.

Add Tailwind CSS and container class

Add the Tailwind CSS CDN link inside the <head>. Then add the container class to the <main> element to center it horizontally.

Tailwind




  
  
  Centering with Tailwind
  


  
    Hello, Tailwind!

Need a hint?

Use the official Tailwind CDN script tag and add class="container" to the main element.

Add padding and background color to container

Add horizontal padding using the Tailwind class px-4 and a light gray background color using bg-gray-100 to the <main> element.

Tailwind




  
  
  Centering with Tailwind
  


  
    
    Hello, Tailwind!

Need a hint?

Add px-4 and bg-gray-100 to the existing container class.

Enhance accessibility

Add an aria-label="Main content container" attribute to the <main> element for accessibility.

Tailwind




  
  
  Centering with Tailwind
  


  
    
    Hello, Tailwind!

Need a hint?

Add aria-label="Main content container" inside the <main> tag.