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')
}
}
}
}
})
}
};
