A TailwindCSS plugin that adds centering utilities.
npm install --save-dev tailwindcss-center
Other Package Managers
yarn add --dev tailwindcss-center
Add the plugin to your Tailwind config:
import tailwindPluginCenter from "tailwindcss-center";
export default {
theme: {
// ...
},
plugins: [
tailwindPluginCenter,
],
};
CommonJS Configs
module.exports = {
theme: {
// ...
},
plugins: [
require("tailwindcss-center"),
],
};
Utilities are provided for centering with Flexbox, CSS Grid, absolute positioning, and auto margins:
<div class="center-flex">
<!-- ... -->
</div>
Centering can also be applied individually to a specific axis:
<div class="center-flex-x">
<!-- ... -->
</div>
<div class="center-flex-y">
<!-- ... -->
</div>
center-flex
center-flex-x
center-flex-y
center-grid
center-grid-x
center-grid-y
center-absolute
center-absolute-x
center-absolute-y
center-margin
center-margin-x
center-margin-y
- @marcoguidara/tailwind-quick-center - A plugin that provides utilities for centering an element on x/y axis.