Function tailwindContainer

packages/backend/src/tailwind/tailwindMain.ts:252–306

(
  node: SceneNode &
    SceneNodeMixin &
    BlendMixin &
    LayoutMixin &
    GeometryMixin &
    MinimalBlendMixin,
  children: string,
  additionalAttr: string,
  settings: TailwindSettings,
)

};

export const tailwindContainer = (
  node: SceneNode &
    SceneNodeMixin &
    BlendMixin &
    LayoutMixin &
    GeometryMixin &
    MinimalBlendMixin,
  children: string,
  additionalAttr: string,
  settings: TailwindSettings,
): string => {
  // Ignore the view when size is zero or less
  if (node.width < 0 || node.height < 0) {
    return children;
  }

  const builder = new TailwindDefaultBuilder(node, settings)
    .commonPositionStyles()
    .commonShapeStyles();

  if (!builder.attributes && !additionalAttr) {
    return children;
  }

  const build = builder.build(additionalAttr);

  // Determine if we should use img tag
  let tag = "div";
  let src = "";
  const topFill = retrieveTopFill(node.fills);

  if (topFill?.type === "IMAGE") {
    addWarning("Image fills are replaced with placeholders");
    const imageURL = getPlaceholderImage(node.width, node.height);

    if (!("children" in node) || node.children.length === 0) {
      tag = "img";
      src = ` src="${imageURL}"`;
    } else {
      builder.addAttributes(`bg-[url(${imageURL})]`);
    }
  }

  // Generate appropriate HTML
  if (children) {
    return `\n<${tag}${build}${src}>${indentString(children)}\n</${tag}>`;
  } else if (
    SELF_CLOSING_TAGS.includes(tag) ||
    settings.tailwindGenerationMode === "jsx"
  ) {
    return `\n<${tag}${build}${src} />`;
  } else {
    return `\n<${tag}${build}${src}></${tag}>`;
  }
};

export const tailwindLine = (
  node: LineNode,