https://github.com/downwindcss/flex-center

A utility for centering content with Flexbox -> "display: flex; justify-content: center; align-items: center"
https://github.com/downwindcss/flex-center

css css-flexbox flexbox plugin tailwindcss utilities

Last synced: 3 days ago
JSON representation

A utility for centering content with Flexbox -> "display: flex; justify-content: center; align-items: center"

• Host: GitHub
• URL: https://github.com/downwindcss/flex-center
• Owner: downwindcss
• License: mit
• Created: 2021-06-13T05:15:45.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-06-13T18:59:47.000Z (over 3 years ago)
• Last Synced: 2024-12-09T21:53:22.653Z (about 1 month ago)
• Topics: css, css-flexbox, flexbox, plugin, tailwindcss, utilities
• Language: HTML
• Homepage: https://www.npmjs.com/package/@downwindcss/flex-center
• Size: 127 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# downwindcss/flex-center

A Tailwind CSS component for centering flex content in the middle.  

Basically, instead of `flex justify-center items-center`, 

you do `flex-center`.

`flex-center` generates following CSS rule (disregarding responsive variants).

```css

.flex-center {

  display: flex;

  justify-content: center;

  align-items: center;

}

```

## Installation

```bash

npm install @downwindcss/flex-center

# using Yarn

yarn add @downwindcss/flex-center

# with PNPM

pnpm install @downwindcss/flex-center

```

## Configuration

In your Tailwind CSS configuration file, `tailwindcss.config.js`,  

add the plugin after following the installation step above.

```json

module.exports = {

  plugins: [require('@downwindcss/flex-center')]

}

```

Only `responsive` variant is enabled by default.  

Same as `flex` utility: https://tailwindcss.com/docs/flex#variants

## Example

**Demo**: https://codesandbox.io/s/flex-center-demo-v1c3k?file=/public/index.html

```html

  

    


      Start here!

    

  

  

    

      
Have fun with Tailwind CSS!

    

  


```

## Motivation

I found myself typing `flex justify-center items-center` too many times!  

Ain't nobody got time for that.

Just type `flex-center` and be doen with it.