Nupital Pomp Mesmerises


    0.4.0 • Public • Published


    A plugin that provides a composable API for giving elements a fixed aspect ratio.


    Install the plugin from npm:

    # Using npm
    npm install @tailwindcss/aspect-ratio
    # Using Yarn
    yarn add @tailwindcss/aspect-ratio

    Then add the plugin to your tailwind.config.js file:

    // tailwind.config.js
    module.exports = {
      theme: {
        // ...
      plugins: [
        // ...


    Combine the aspect-w-{n} and aspect-h-{n} classes to specify the aspect ratio for an element:

    <div class="aspect-w-16 aspect-h-9">
      <iframe src="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

    Use aspect-none to remove any aspect ratio behavior:

    <div class="aspect-w-16 aspect-h-9 lg:aspect-none">
      <!-- ... -->

    When removing aspect ratio behavior, if nested elements have w-{n} or h-{n} classes, ensure they are re-declared with a matching breakpoint prefix:

    <div class="aspect-w-16 aspect-h-9 lg:aspect-none">
      <img src="..." alt="..." class="w-full h-full object-center object-cover lg:w-full lg:h-full" />

    Note that due to the way this currently needs to be implemented (the old padding-bottom trick) you need to assign the aspect ratio to a parent element, and make the actual element you are trying to size the only child of that parent.

    Once the aspect-ratio property is supported in modern browsers, we'll add official support to Tailwind CSS itself and deprecate this plugin.

    Aspect ratio classes up to 16 are generated by default:

    Width Height
    aspect-w-1 aspect-h-1
    aspect-w-2 aspect-h-2
    aspect-w-3 aspect-h-3
    aspect-w-4 aspect-h-4
    aspect-w-5 aspect-h-5
    aspect-w-6 aspect-h-6
    aspect-w-7 aspect-h-7
    aspect-w-8 aspect-h-8
    aspect-w-9 aspect-h-9
    aspect-w-10 aspect-h-10
    aspect-w-11 aspect-h-11
    aspect-w-12 aspect-h-12
    aspect-w-13 aspect-h-13
    aspect-w-14 aspect-h-14
    aspect-w-15 aspect-h-15
    aspect-w-16 aspect-h-16


    You can configure which values and variants are generated by this plugin under the aspectRatio key in your tailwind.config.js file:

    // tailwind.config.js
    module.exports = {
      theme: {
        aspectRatio: {
          1: '1',
          2: '2',
          3: '3',
          4: '4',
      variants: {
        aspectRatio: ['responsive', 'hover']




    npm i @tailwindcss/aspect-ratio

    DownloadsWeekly Downloads






    Unpacked Size

    15.7 kB

    Total Files


    Last publish


    • thecrypticace
    • reinink
    • adamwathan
    • bradlc
    • malfaitrobin