8000 Add native aspect ratio support by reinink · Pull Request #5359 · tailwindlabs/tailwindcss · GitHub
Skip to content

Add native aspect ratio support - #5359

Merged
adamwathan merged 1 commit into
masterfrom
native-aspect-ratio
Sep 2, 2021
Merged

Add native aspect ratio support#5359
adamwathan merged 1 commit into
masterfrom
native-aspect-ratio

Conversation

@reinink

@reinink reinink commented Sep 1, 2021

Copy link
Copy Markdown
Member

This PR adds native aspect ratio support. Once Safari 15 is popularized, this will have full support in modern browsers.

By default, we include these utilities:

Class CSS
aspect-auto aspect-ratio: auto
aspect-square aspect-ratio: 1 / 1
aspect-video aspect-ratio: 16 / 9

We considered adding a bunch more by default, but in practice it's easier to just use arbitrary values instead of providing an exhaustive list of numeric values in your config file. For example:

<img class="aspect-[16/9] ... "/>

This utility can be customized under the aspectRatio property in your tailwind.config.js file.

This addition does not conflict with the existing aspect ratio plugin, as it uses different utility names.

@adamwathan
adamwathan merged commit e9cde3a into master Sep 2, 2021
@adamwathan
adamwathan deleted the native-aspect-ratio branch September 2, 2021 12:32
@say8425

say8425 commented Sep 24, 2021

Copy link
Copy Markdown

When you plan to release this feature?

@reinink

reinink commented Sep 24, 2021

Copy link
Copy Markdown
Member Author

@say8425 The plan is to release a v3.0 alpha of Tailwind CSS in the next couple of weeks. You can, however, also use an insiders release if you want it today.

@ChazUK

ChazUK commented Jul 19, 2022

Copy link
Copy Markdown

I have tailwindcss version ^3.1.6 and I'm trying to do class="aspect-video" but no styling is being applied. Is it not yet available in 3.1.6? because the docs say it is https://tailwindcss.com/docs/aspect-ratio

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants