{"id":13433893,"url":"https://github.com/tailwindlabs/tailwindcss-aspect-ratio","last_synced_at":"2025-05-14T12:10:48.168Z","repository":{"id":42378378,"uuid":"310686619","full_name":"tailwindlabs/tailwindcss-aspect-ratio","owner":"tailwindlabs","description":null,"archived":false,"fork":false,"pushed_at":"2024-03-22T17:16:27.000Z","size":41,"stargazers_count":997,"open_issues_count":0,"forks_count":36,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-05-08T04:38:31.304Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tailwindlabs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2020-11-06T19:20:06.000Z","updated_at":"2025-04-29T19:47:02.000Z","dependencies_parsed_at":"2024-03-22T18:37:52.095Z","dependency_job_id":"f2fad69b-3c98-483d-9bbe-ab324ee6bc3d","html_url":"https://github.com/tailwindlabs/tailwindcss-aspect-ratio","commit_stats":{"total_commits":50,"total_committers":11,"mean_commits":4.545454545454546,"dds":0.54,"last_synced_commit":"c9027ad30f8cd19fc259f596bada3a090230a15a"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tailwindlabs%2Ftailwindcss-aspect-ratio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tailwindlabs%2Ftailwindcss-aspect-ratio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tailwindlabs%2Ftailwindcss-aspect-ratio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tailwindlabs%2Ftailwindcss-aspect-ratio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tailwindlabs","download_url":"https://codeload.github.com/tailwindlabs/tailwindcss-aspect-ratio/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254140760,"owners_count":22021219,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T02:01:39.588Z","updated_at":"2025-05-14T12:10:48.113Z","avatar_url":"https://github.com/tailwindlabs.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Plugins","Plugins \u0026 Extensions"],"sub_categories":[],"readme":"# @tailwindcss/aspect-ratio\n\nA plugin that provides a composable API for giving elements a fixed aspect ratio.\n\n\n## Installation\n\nInstall the plugin from npm:\n\n```sh\nnpm install -D @tailwindcss/aspect-ratio\n```\n\nThen add the plugin to your `tailwind.config.js` file, and disable the `aspectRatio` core plugin to avoid conflicts with the native `aspect-ratio` utilities included in Tailwind CSS v3.0:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    // ...\n  },\n  corePlugins: {\n    aspectRatio: false,\n  },\n  plugins: [\n    require('@tailwindcss/aspect-ratio'),\n    // ...\n  ],\n}\n```\n\n## Usage\n\nCombine the `aspect-w-{n}` and `aspect-h-{n}` classes to specify the aspect ratio for an element:\n\n```html\n\u003cdiv class=\"aspect-w-16 aspect-h-9\"\u003e\n  \u003ciframe src=\"https://www.youtube.com/embed/dQw4w9WgXcQ\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen\u003e\u003c/iframe\u003e\n\u003c/div\u003e\n```\n\nUse `aspect-none` to remove any aspect ratio behavior:\n\n```html\n\u003cdiv class=\"aspect-w-16 aspect-h-9 lg:aspect-none\"\u003e\n  \u003c!-- ... --\u003e\n\u003c/div\u003e\n```\n\nWhen removing aspect ratio behavior, if nested elements have `w-{n}` or `h-{n}` classes, ensure they are re-declared with a matching breakpoint prefix:\n\n```html\n\u003cdiv class=\"aspect-w-16 aspect-h-9 lg:aspect-none\"\u003e\n  \u003cimg src=\"...\" alt=\"...\" class=\"w-full h-full object-center object-cover lg:w-full lg:h-full\" /\u003e\n\u003c/div\u003e\n```\n\nNote that due to the way this currently needs to be implemented ([the old padding-bottom trick](https://css-tricks.com/aspect-ratio-boxes/)) 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.\n\nOnce the [`aspect-ratio` property](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) is supported in modern browsers, we'll add official support to Tailwind CSS itself and deprecate this plugin.\n\nAspect ratio classes up to 16 are generated by default:\n\n| Width | Height |\n| --- | --- |\n| `aspect-w-1` | `aspect-h-1` |\n| `aspect-w-2` | `aspect-h-2` |\n| `aspect-w-3` | `aspect-h-3` |\n| `aspect-w-4` | `aspect-h-4` |\n| `aspect-w-5` | `aspect-h-5` |\n| `aspect-w-6` | `aspect-h-6` |\n| `aspect-w-7` | `aspect-h-7` |\n| `aspect-w-8` | `aspect-h-8` |\n| `aspect-w-9` | `aspect-h-9` |\n| `aspect-w-10` | `aspect-h-10` |\n| `aspect-w-11` | `aspect-h-11` |\n| `aspect-w-12` | `aspect-h-12` |\n| `aspect-w-13` | `aspect-h-13` |\n| `aspect-w-14` | `aspect-h-14` |\n| `aspect-w-15` | `aspect-h-15` |\n| `aspect-w-16` | `aspect-h-16` |\n\n## Configuration\n\nYou can configure which values and variants are generated by this plugin under the `aspectRatio` key in your `tailwind.config.js` file:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  theme: {\n    aspectRatio: {\n      1: '1',\n      2: '2',\n      3: '3',\n      4: '4',\n    }\n  },\n  variants: {\n    aspectRatio: ['responsive', 'hover']\n  }\n}\n```\n\n## Compatibility with default aspect-ratio utilities\n\nTailwind CSS v3.0 shipped with [native aspect-ratio](https://tailwindcss.com/docs/aspect-ratio) support, and while these new utilities are great, the `aspect-ratio` property isn't supported in Safari 14, which still has [significant global usage](https://caniuse.com/mdn-css_properties_aspect-ratio). If you need to support Safari 14, this plugin is still the best way to do that.\n\nWhile it's technically possible to use the new native `aspect-ratio` utilities as well as this plugin in the same project, it doesn't really make a lot of sense to do so. If you're able to use the new native aspect-ratio utilities, just use them instead of this plugin, as they are a lot simpler and work much better.\n\nHowever, if you do want to use both approaches in your project, maybe as a way of transitioning slowly from the plugin approach to the new native utilities, you'll need to add the following values to your `tailwind.config.js` file:\n\n```js\nmodule.exports = {\n  // ...\n  theme: {\n    aspectRatio: {\n      auto: 'auto',\n      square: '1 / 1',\n      video: '16 / 9',\n      1: '1',\n      2: '2',\n      3: '3',\n      4: '4',\n      5: '5',\n      6: '6',\n      7: '7',\n      8: '8',\n      9: '9',\n      10: '10',\n      11: '11',\n      12: '12',\n      13: '13',\n      14: '14',\n      15: '15',\n      16: '16',\n    },\n  },\n}\n```\n\nThis is necessary, as the default `aspectRatio` values are overwritten by this plugin's values.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftailwindlabs%2Ftailwindcss-aspect-ratio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftailwindlabs%2Ftailwindcss-aspect-ratio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftailwindlabs%2Ftailwindcss-aspect-ratio/lists"}