https://github.com/marcoguidara/tailwindcss-quick-center
A plugin that provides utilities for centering an element on x/y axis.
https://github.com/marcoguidara/tailwindcss-quick-center
tailwind-plugin tailwindcss
Last synced: 4 months ago
JSON representation
A plugin that provides utilities for centering an element on x/y axis.
- Host: GitHub
- URL: https://github.com/marcoguidara/tailwindcss-quick-center
- Owner: marcoguidara
- License: mit
- Created: 2022-05-22T08:19:39.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2022-12-23T08:34:31.000Z (about 3 years ago)
- Last Synced: 2025-02-16T05:03:14.791Z (about 1 year ago)
- Topics: tailwind-plugin, tailwindcss
- Language: JavaScript
- Homepage:
- Size: 18.6 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Tailwind Quick Center
> A plugin that provides utilities for centering an element on x/y axis.
## The problem 🤔
Centering an element using Tailwindcss classes can rapidly become verbose.
## The solution 🚀
Dedicated centering classes at component layer that cover the most common situations.
## Install the plugin from npm:
```
$ npm i @marcoguidara/tailwindcss-quick-center
```
## Then add the plugin to your `tailwind.config.js` file:
```js
// tailwind.config.js
module.exports = {
plugins: [require('@marcoguidara/tailwindcss-quick-center')],
};
```
## Usage:
### Center on both x and y axis
```html
```
### Center on the x axis
```html
```
### Center on the y axis
```html
```
## Add variants:
```js
// tailwind.config.js
module.exports = {
variants: {
// default 'responsive'
quickCenter: ['first'],
},
};
```
## This plugin will generate following CSS:
```css
.center-absolute-y {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.center-absolute-x {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.center-absolute {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.center-flex-y {
display: flex;
flex-direction: column;
justify-content: center;
}
.center-flex-x {
display: flex;
flex-direction: column;
align-items: center;
}
.center-flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
```
## License
Tailwind Quick Center is licensed under the MIT License.