Nonlinear Programming Methods

    @neojp/tailwindcss-aspect-ratio-utilities

    1.0.1 • Public • Published


    A utility-first CSS framework for rapidly building custom user interfaces.



    Tailwind CSS aspect ratio utilities

    This is a Tailwind CSS plugin that adds an utilities for restrict an element with a set aspect ratio based on the parent's element's width.

    Maintained by: Joan Piedra@neojp

    Installation

    Install as a node module with either npm or yarn on your command line

    # Install via npm
    npm install --save-dev @neojp/tailwindcss-aspect-ratio-utilities
    
    # Install via yarn
    yarn add --dev @neojp/tailwindcss-aspect-ratio-utilities

    Add this module as a plugin on your Tailwind configuration file (tailwind.config.js).

    module.exports = {
      plugins: [
          require('@neojp/tailwindcss-aspect-ratio-utilities')
      ]
    };

    Variants

    Note that this plugin allows the usage of variants through the key aspectRatio and will default to your global variant setting.

    module.exports = {
      variants: {
        aspectRatio: ['responsive']
      }
    };

    Usage

    Use the Tailwind utility classes provided by this plugin.

    <div class="aspect-ratio-square"></div>
    <div class="aspect-ratio-3/2"></div>
    <div class="aspect-ratio-2/3"></div>
    <div class="aspect-ratio-4/3"></div>
    <div class="aspect-ratio-5/6"></div>
    <div class="aspect-ratio-16/9"></div>
    <div class="aspect-ratio-21/9"></div>

    Examples

    Draw a gray 256px square box:

    <div class="bg-gray-500 w-64">
      <div class="aspect-ratio-square"></div>
    </div>

    Restrict an image to a 4/3 aspect ratio:

    <div class="bg-gray-500 relative w-64">
      <div class="aspect-ratio-4/3"></div>
      <img class="absolute h-full left-0 object-cover top-0 w-full" src="https://images.unsplash.com/photo-1575470066032-42f6bce0c7fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=300&q=80" alt="Unsplash stock image by Josh Hild">
    </div>

    Embed a YouTube video and restrict it to an aspect ratio of 16/9:

    <div class="bg-gray-400 mx-auto relative w-1/2">
      <div class="aspect-ratio-16/9"></div>
      <iframe class="absolute h-full left-0 top-0 w-full" width="560" height="315" src="https://www.youtube.com/embed/21HuwjmuS7A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>

    Output

    Tailwind will be outputed as follows.

    .aspect-ratio-square { padding-top: 100%; }
    .aspect-ratio-3\/2   { padding-top: 66.66666666666667%; }
    .aspect-ratio-2\/3   { padding-top: 150%; }
    .aspect-ratio-4\/3   { padding-top: 75%; }
    .aspect-ratio-5\/6   { padding-top: 120%; }
    .aspect-ratio-16\/9  { padding-top: 56.25%; }
    .aspect-ratio-21\/9  { padding-top: 42.86%; }

    Related plugins

    Shout out to tailwindcss-aspect-ratio another plugin that attemps to handle aspect ratios on Tailwind CSS.

    Contributing

    Feel free to submit a PR request, and send me a message on Twitter (@neojp) about it.

    License

    This project has been licensed under the Hippocratic License.

    Install

    npm i @neojp/tailwindcss-aspect-ratio-utilities

    DownloadsWeekly Downloads

    28

    Version

    1.0.1

    License

    SEE LICENSE IN LICENSE

    Unpacked Size

    7.46 kB

    Total Files

    4

    Last publish

    Collaborators

    • neojp