How to create a full-width Container in Tailwind CSS?

Creating a full-width Container in Tailwind CSS involves using the container class along with additional utility classes like mx-auto to centre the content. The container class ensures that the content remains within a fixed width, and mx-auto centres it horizontally.

Syntax:

<div class="container mx-auto">
  <!-- Content goes here -->
</div>

Classes

Class	Description
container	Provides a fixed-width container for content, restricting its width to a predefined maximum size.
mx-auto	Centres the container horizontally by setting the left and right margins to auto.

Key Features

• Fixed-Width Container: The container class maintains a consistent width for the content, ensuring readability and alignment.
• Horizontal Centering: mx-auto centres the container horizontally within its parent element.
• Responsive Design: Tailwind’s responsive variants (sm:, md:, lg:, xl:) can be applied to adjust the container width at different screen sizes.