Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add native aspect ratio support #5359

Merged
merged 1 commit into from
Sep 2, 2021
Merged

Add native aspect ratio support #5359

merged 1 commit into from
Sep 2, 2021

Conversation

reinink
Copy link
Member

@reinink reinink commented Sep 1, 2021

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
Copy link

say8425 commented Sep 24, 2021

When you plan to release this feature?

@reinink
Copy link
Member Author

reinink commented Sep 24, 2021

@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
Copy link

ChazUK commented Jul 19, 2022

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