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