tailwindcss-center

tailwindcss-center

A TailwindCSS plugin that adds centering utilities.

Install

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"),
	],
};

Usage

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>

Provided Utilities

Flex

• center-flex
• center-flex-x
• center-flex-y

Grid

• center-grid
• center-grid-x
• center-grid-y

Absolute

• center-absolute
• center-absolute-x
• center-absolute-y

Margin

• center-margin
• center-margin-x
• center-margin-y

Related

• @marcoguidara/tailwind-quick-center - A plugin that provides utilities for centering an element on x/y axis.