@tailwindcss/aspect-ratio - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

package.json

 {
   "name": "@tailwindcss/aspect-ratio",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "main": "src/index.js",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

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

src/index.js

@@ -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]) => {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

31620

increased by9.22%

Lines of code

1043

increased by9.33%

Number of lines in readme file

96

increased by10.34%

No dependency changes