tailwind-percentage-heights-plugin

A plugin for Tailwind CSS that adds percentage heights

Adds the following classes to your Tailwind project:

| Class | Property |
| :------- | :----------------- |
| .h-1/2 | height: 50%; |
| .h-1/3 | height: 33.33333%; |
| .h-2/3 | height: 66.66667%; |
| .h-1/4 | height: 25%; |
| .h-3/4 | height: 75%; |
| .h-1/5 | height: 20%; |
| .h-2/5 | height: 40%; |
| .h-3/5 | height: 60%; |
| .h-1/6 | height: 16.66667%; |
| .h-5/6 | height: 83.33333%; |
| .h-1/10 | height: 10%; |
| .h-3/10 | height: 30%; |
| .h-7/10 | height: 70%; |
| .h-9/10 | height: 90%; |

Installation

You can add this to your project via NPM by running:

npm i tailwind-percentage-heights-plugin

How to Use

In your Tailwind config file (typically: tailwind.js), you can require this package in the plugins Array, like so:

``
plugins: [
require('/tailwind-percentage-heights-plugin')(),
]
``

Then if you re-run your build suite, you can start using the classes listed above.