Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tommy-mitchell/tailwindcss-center
A TailwindCSS plugin that adds centering utilities.
https://github.com/tommy-mitchell/tailwindcss-center
centering flexbox grid tailwindcss tailwindcss-plugin
Last synced: about 1 month ago
JSON representation
A TailwindCSS plugin that adds centering utilities.
- Host: GitHub
- URL: https://github.com/tommy-mitchell/tailwindcss-center
- Owner: tommy-mitchell
- License: mit
- Created: 2024-01-19T01:45:51.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-02-16T23:13:08.000Z (11 months ago)
- Last Synced: 2024-11-15T02:41:49.700Z (2 months ago)
- Topics: centering, flexbox, grid, tailwindcss, tailwindcss-plugin
- Language: TypeScript
- Homepage: https://npm.im/tailwindcss-center
- Size: 11.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: license.md
Awesome Lists containing this project
README
# tailwindcss-center
A TailwindCSS plugin that adds centering utilities.
## Install
```sh
npm install --save-dev tailwindcss-center
```
Other Package Managers
```sh
yarn add --dev tailwindcss-center
```
Add the plugin to your Tailwind config:
```ts
import tailwindPluginCenter from "tailwindcss-center";
export default {
theme: {
// ...
},
plugins: [
tailwindPluginCenter,
],
};
```
CommonJS Configs
```ts
module.exports = {
theme: {
// ...
},
plugins: [
require("tailwindcss-center"),
],
};
```
## Usage
Utilities are provided for centering with Flexbox, CSS Grid, absolute positioning, and auto margins:
```html
```
Centering can also be applied individually to a specific axis:
```html
```
### 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](https://github.com/marcoguidara/tailwindcss-quick-center) - A plugin that provides utilities for centering an element on x/y axis.