https://github.com/nickbasile/tailwind-percentage-heights-plugin

A plugin for Tailwind CSS that adds percentage heights
https://github.com/nickbasile/tailwind-percentage-heights-plugin

css tailwind tailwindcss

Last synced: about 2 months ago
JSON representation

A plugin for Tailwind CSS that adds percentage heights

• Host: GitHub
• URL: https://github.com/nickbasile/tailwind-percentage-heights-plugin
• Owner: nickbasile
• License: mit
• Created: 2018-03-20T21:42:01.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-03-20T22:43:26.000Z (almost 7 years ago)
• Last Synced: 2024-09-17T16:51:07.430Z (3 months ago)
• Topics: css, tailwind, tailwindcss
• Language: JavaScript
• Size: 8.79 KB
• Stars: 20
• Watchers: 2
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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.