Fluid Width
Use the fluid width container so to wrap your content so it adapts well to all screen sizes.
<div class="container-fluid">
Example content goes here...
</div>
Fixed Width
Use the fixed width container to wrap your content, keeping it within a consistent width
<div class="container-fixed">
Example content goes here...
</div>
Source Code
The following source file manages the CSS styles of the Tailwind CSS Container component.
Upon building the assets using Webpack Build Tools,
the below file is compiled and added into the
dist/assets/css/styles.css bundle,
making it available globally across all pages.
| File | Description |
|---|---|
src/core/plugins/components/container.js
|
The Tailwind CSS compatible plugin written in PostCSS for applying CSS styles to the Tailwind CSS Container component. |
Customization
Refer to the
tailwind.config.js configuration file to customize the width and padding
of fixed and fluid containers globally through the theme.custom.components.container property
module.exports = {
theme: {
custom: ({ theme }) => ({
components: {
container: {
fixed: {
px: {
DEFAULT: theme('spacing.6'),
xl: theme('spacing.8')
},
'max-width': theme('screens.xl')
},
fluid: {
px: {
DEFAULT: theme('spacing.6'),
lg: theme('spacing.8')
}
}
}
}
})
}
};
