0.1.4 • Published 6 years ago
tailwind-percentage-heights-plugin v0.1.4
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('<path-to-package>/tailwind-percentage-heights-plugin')(),
]Then if you re-run your build suite, you can start using the classes listed above.