Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@tailwindcss/aspect-ratio
Advanced tools
Readme
A plugin that provides a composable API for giving elements a fixed aspect ratio.
Install the plugin from npm:
npm install -D @tailwindcss/aspect-ratio
Then 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:
// tailwind.config.js
module.exports = {
theme: {
// ...
},
corePlugins: {
aspectRatio: false,
},
plugins: [
require('@tailwindcss/aspect-ratio'),
// ...
],
}
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:
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']
}
}
Tailwind CSS v3.0 shipped with native 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. If you need to support Safari 14, this plugin is still the best way to do that.
While 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.
However, 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:
module.exports = {
// ...
theme: {
aspectRatio: {
auto: 'auto',
square: '1 / 1',
video: '16 / 9',
1: '1',
2: '2',
3: '3',
4: '4',
5: '5',
6: '6',
7: '7',
8: '8',
9: '9',
10: '10',
11: '11',
12: '12',
13: '13',
14: '14',
15: '15',
16: '16',
},
},
}
This is necessary, as the default aspectRatio
values are overwritten by this plugin's values.
FAQs
A plugin that provides a composable API for giving elements a fixed aspect ratio.
The npm package @tailwindcss/aspect-ratio receives a total of 405,631 weekly downloads. As such, @tailwindcss/aspect-ratio popularity was classified as popular.
We found that @tailwindcss/aspect-ratio demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.