How to create a full-width Container in Tailwind CSS?
Last Updated :
05 Feb, 2024
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.
Share your thoughts in the comments
Please Login to comment...