https://github.com/winston0410/tailwindcss-absolute-centering

A Tailwindcss plugin to help you center elements with position: relative and position:absolute easily.
https://github.com/winston0410/tailwindcss-absolute-centering

postcss tailwindcss tailwindcss-plugin

Last synced: about 2 months ago
JSON representation

A Tailwindcss plugin to help you center elements with position: relative and position:absolute easily.

• Host: GitHub
• URL: https://github.com/winston0410/tailwindcss-absolute-centering
• Owner: winston0410
• Created: 2020-11-05T02:50:08.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2020-11-09T02:56:37.000Z (about 4 years ago)
• Last Synced: 2024-05-21T11:50:56.103Z (8 months ago)
• Topics: postcss, tailwindcss, tailwindcss-plugin
• Language: JavaScript
• Homepage:
• Size: 68.4 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Tailwindcss Absolute Centering

[![Maintainability](https://api.codeclimate.com/v1/badges/040556484eb39232b27e/maintainability)](https://codeclimate.com/github/winston0410/tailwindcss-absolute-centering/maintainability) [![Test Coverage](https://api.codeclimate.com/v1/badges/040556484eb39232b27e/test_coverage)](https://codeclimate.com/github/winston0410/tailwindcss-absolute-centering/test_coverage) [![Known Vulnerabilities](https://snyk.io/test/github/winston0410/tailwindcss-absolute-centering/badge.svg?targetFile=package.json)](https://snyk.io/test/github/winston0410/tailwindcss-absolute-centering?targetFile=package.json) [![Codacy Badge](https://app.codacy.com/project/badge/Grade/47527772461148aa9c29b054d93cfdb2)](https://www.codacy.com/gh/winston0410/tailwindcss-absolute-centering/dashboard?utm_source=github.com&utm_medium=referral&utm_content=winston0410/tailwindcss-absolute-centering&utm_campaign=Badge_Grade)

A Tailwindcss plugin to help you center elements with `position: relative` and `position:absolute` easily.

## Installation

```

npm i tailwindcss-absolute-centering

```

```

yarn add tailwindcss-absolute-centering

```

Then require it in `tailwind.config.js`

```javascript

//tailwindcss.config.js

//Other config...

plugins: [

  require('tailwindcss-absolute-centering')

  ]

}

```

## Class included

```css

.absolute-vertical-center{

  top: '50%';

  transform: 'translateY(-50%)';

}

'.absolute-horizontal-center': {

  left: '50%';

  transform: 'translateX(-50%)';

}

.top-50%{

  top: 50%

}

.left-50%{

  left: 50%;

}

.bottom-50%{

  bottom: 50%;

}

.right-50%{

  right: 50%;

}

.translate-x-50%{

  transform: translateX(50%);

}

.translate-y-50%{

  transform: translateY(50%); 

}

```