feat: max width and max height

Author: xWayfinder

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layouts-css/tailwindcss-plugin",
-  "version": "1.0.2",
+  "version": "1.1.0-alpha.1",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "repository": "https://github.com/layouts-css/tailwindcss-plugin",
@@ -16,4 +16,4 @@
   "peerDependencies": {
     "tailwindcss": ">=3.0.0 || insiders"
   }
-}
+}

src/index.js

@@ -22,6 +22,16 @@ const layoutCss = withOptions((options = {}) => {
           flexShrink: '1',
           height: value,
         }),
+        'w-max': (value) => ({
+          flexGrow: '1',
+          flexShrink: '1',
+          maxWidth: value,
+        }),
+        'h-max': (value) => ({
+          flexGrow: '1',
+          flexShrink: '1',
+          maxHeight: value,
+        }),
       },
       { values: theme('space') }
     );
@@ -40,6 +50,11 @@ const layoutCss = withOptions((options = {}) => {
         height: 'fit-content',
       },
 
+      '.w-foo': {
+        flexGrow: '1',
+        flexShrink: '0',
+        maxWidth: '94rem',
+      },
       '.s-hug': {
         width: 'fit-content',
         height: 'fit-content',