0.4.0 • Published 1 month ago

@tailwindcss/aspect-ratio v0.4.0

Weekly downloads
27,166
License
MIT
Repository
github
Last release
1 month ago

@tailwindcss/aspect-ratio

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

Installation

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: [
    require('@tailwindcss/aspect-ratio'),
    // ...
  ],
}

Usage

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="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Use aspect-none to remove any aspect ratio behavior:

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

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" />
</div>

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:

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

Configuration

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']
  }
}
auctic-uipmi-iqos-dce2@mayking0811/ui-componentson-rewind-uiholo-design-system-vuepegadaian-components@monto/tailwindcssalliance-wydget-vuejibreskaze-uiindebted-stylesradixhr-clientpenthouse-designpushgeek-web-push-servicesmfx-component-librarysheldons-componentssheldons-componetnsrm-web-componentscatalyst-vc-reactchat-websitedaihatsu-cfdaihatsu-cfformdaihatsu-teriosdaihatsu-xeniagatsby-theme-animated-tailwinddesy-frontenddesy-htmldocnedecanterelm-default-tailwind-moduleselsa-2.0-designerelsa-workflow-designer-mattw-css-extractortwinklecsstailwindcss-jit-cdntailwindcss-browser-plugin@baleada/prepare@benbender/tailwind-preset@boaterbase/bb-react-componentsx-flow-components-tailwind@flmnh-mgcl/ui@flmnh-mgcl/ui-tailwind-config@hurtigruten/tailwind-preset@dtox/ember-utils@elsa-workflows/elsa-workflows-studio@docus/blog-theme-edge@ennit/webpack-config@espressotutorialsgmbh/espresso-tailwind-config@enzymefinance/ui@eibeleza/svelte-components@fabric-ds/tailwind-config@marketplace-co/styles@jibres/siftal-style@nujek/bundle@realequity/ui-components@qctrl/elements-css@pagemaker.io/pagemaker@jamesacklin/urbit-ds@leuven2030/ui@lightsohq/tailwindcss@live-codes/tailwindcss-browser-plugin@pinpt/changelog@pinpt/changelog-generator@neo4j-design-system/tailwind-preset@onrewind/tailwind@sentrei/tailwind@sentrei/tailwindcss@slipmatio/tailwind-config@thesimplecloud/components@thesimplecloud/ui-components@sony172/editorjs-itemlist@sentecacommerce-theme/office-one-theme@sentecacommerce-theme/packlion-theme@shunkakinoki/tailwindcss@tsalliance/wydget-vue@tutor2u/tutor2u-ui@turingsecure/tailwind-preset@uidu/tailwind-config
0.4.0

2 months ago

0.3.0

4 months ago

0.2.2

4 months ago

0.2.1

8 months ago

0.2.0

1 year ago

0.1.2

1 year ago

0.1.4

1 year ago

0.1.3

1 year ago

0.1.1

1 year ago

0.1.0

1 year ago