Socket
Socket
Sign inDemoInstall

@tailwindcss/aspect-ratio

Package Overview
Dependencies
Maintainers
3
Versions
25
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@tailwindcss/aspect-ratio - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

2

package.json
{
"name": "@tailwindcss/aspect-ratio",
"version": "0.1.3",
"version": "0.1.4",
"main": "src/index.js",

@@ -5,0 +5,0 @@ "license": "MIT",

@@ -43,2 +43,11 @@ # @tailwindcss/aspect-ratio

Use `aspect-none` to remove any aspect ratio behavior:
```html
<div class="aspect-w-16 aspect-h-9 lg:aspect-none">
<!-- ... -->
</div>
```
Note 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.

@@ -45,0 +54,0 @@

@@ -26,4 +26,2 @@ const plugin = require('tailwindcss/plugin')

},
},
{
[childSelectors]: {

@@ -38,2 +36,15 @@ position: 'absolute',

},
'.aspect-none': {
position: 'static',
paddingBottom: '0',
},
'.aspect-none > *': {
position: 'static',
height: 'auto',
width: 'auto',
top: 'auto',
right: 'auto',
bottom: 'auto',
left: 'auto',
},
},

@@ -40,0 +51,0 @@ Object.entries(values).map(([key, value]) => {

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc