Even simpler

docs/widgets/services/iframe.md

@@ -23,10 +23,10 @@ widget:
 ```yaml
 widget:
   type: iframe
-  name: myIframe # string - required - Also helps if you would like to target the iframe with a button
-  src: "http://example.com" # string - required - URL of the content to load within the iFrame
-  classes: "h-60 sm:h-60 md:h-60 lg:h-60 xl:h-60 2xl:h-72 w-full rounded" # string - optional - Apply any tailwind height, rounding or width classes you would like
-  referrerPolicy: "same-origin" # string - optional - no default
+  name: myIframe
+  src: "http://example.com"
+  classes: "h-60 sm:h-60 md:h-60 lg:h-60 xl:h-60 2xl:h-72" # optional, use tailwind height classes, see https://tailwindcss.com/docs/height
+  referrerPolicy: "same-origin" # optional, no default
   allowPolicy: "autoplay fullscreen gamepad" # optional, no default
   allowFullscreen: false # optional, default: true
   loadingStrategy: "eager" # optional, default: "eager"

src/widgets/iframe/component.jsx

@@ -19,7 +19,7 @@ export default function Component({ service }) {
 
   const scrollingDisableStyle = widget?.allowScrolling === "no" ? { pointerEvents: "none", overflow: "hidden" } : {};
 
-  const classes = widget?.classes || "h-60 sm:h-60 md:h-60 lg:h-60 xl:h-60 2xl:h-72 w-full rounded";
+  const classes = widget?.classes || "h-60 sm:h-60 md:h-60 lg:h-60 xl:h-60 2xl:h-72";
 
   return (
     <Container service={service}>
@@ -43,7 +43,7 @@ export default function Component({ service }) {
           style={{
             scrollingDisableStyle,
           }}
-          className={classes}
+          className={`rounded w-full ${classes}`}
         />
       </div>
     </Container>

tailwind.config.js

@@ -80,13 +80,5 @@ module.exports = {
       pattern: /h-([0-96])/,
       variants: ["sm", "md", "lg", "xl", "2xl"],
     },
-    {
-      pattern: /w-([0-96])/,
-      variants: ["sm", "md", "lg", "xl", "2xl"],
-    },
-    {
-      pattern: /rounded-(sm|md|lg|xl|2xl|3xl|full)/,
-      variants: ["sm", "md", "lg", "xl", "2xl"],
-    },
   ],
 };