Enhancements to Tailwind Class Generation and Figma Plugin Updates (#131)

* Added Tailwind class names for serif and mono fonts

When the user select a specific font family in Figma and it matches with the default font family defined in Tailwind, the generated code in the plugin uses the Tailwind utility classes.
https://tailwindcss.com/docs/font-family

* Added Tailwind class for overflow hidden

When the option "Clip content" in Figma on a frame, or component is enabled, the plugin prints the class "overflow-hidden" in the generated code.
https://tailwindcss.com/docs/overflow
https://www.delasign.com/blog/figma-frame-clip-content/

* Improvement to css class name generation for custom color names

Up until now the plugin would generate class names for custom color names as "hello-hello world" if the Figma variable name is "hello/hello world". This created 2 css class names.

With this code change spaces would be converted to dashes, so that the Figma variable name "hello/hello world" will generate "hello-hello-world".

* Added Figma "documentonchange" listener

Every time something is being updated in the Figma file, the generated plugin code updates.

Author: Lampenbauer

apps/plugin/plugin-src/code.ts

@@ -83,9 +83,17 @@ const safeRun = (settings: PluginSettings) => {
 const standardMode = async () => {
   figma.showUI(__html__, { width: 450, height: 550, themeColors: true });
   await initSettings();
+  
+  // Listen for selection changes
   figma.on("selectionchange", () => {
     safeRun(userPluginSettings);
   });
+
+  // Listen for document changes
+  figma.on("documentchange", () => {
+    safeRun(userPluginSettings);
+  });
+
   figma.ui.onmessage = (msg) => {
     console.log("[node] figma.ui.onmessage", msg);
 

packages/backend/src/tailwind/conversionTables.ts

@@ -115,7 +115,7 @@ export const nearestColorFromRgb = (color: RGB) => {
 
 export const variableToColorName = (alias: VariableAlias) => {
   return (
-    figma.variables.getVariableById(alias.id)?.name.replaceAll("/", "-") ||
+    figma.variables.getVariableById(alias.id)?.name.replaceAll("/", "-").replaceAll(" ", "-") || 
     alias.id.toLowerCase().replaceAll(":", "-")
   );
 };

packages/backend/src/tailwind/tailwindMain.ts

@@ -146,21 +146,24 @@ const tailwindFrame = (
     isJsx,
   );
 
+  // Add overflow-hidden class if clipsContent is true
+  const clipsContentClass = node.clipsContent ? " overflow-hidden" : "";
+
   if (node.layoutMode !== "NONE") {
     const rowColumn = tailwindAutoLayoutProps(node, node);
-    return tailwindContainer(node, childrenStr, rowColumn, isJsx);
+    return tailwindContainer(node, childrenStr, rowColumn + clipsContentClass, isJsx);
   } else {
     if (
       localTailwindSettings.optimizeLayout &&
       node.inferredAutoLayout !== null
     ) {
       const rowColumn = tailwindAutoLayoutProps(node, node.inferredAutoLayout);
-      return tailwindContainer(node, childrenStr, rowColumn, isJsx);
+      return tailwindContainer(node, childrenStr, rowColumn + clipsContentClass, isJsx);
     }
 
     // node.layoutMode === "NONE" && node.children.length > 1
     // children needs to be absolute
-    return tailwindContainer(node, childrenStr, "", isJsx);
+    return tailwindContainer(node, childrenStr, clipsContentClass, isJsx);
   }
 };
 

packages/backend/src/tailwind/tailwindTextBuilder.ts

@@ -97,6 +97,46 @@ export class TailwindTextBuilder extends TailwindDefaultBuilder {
   };
 
   fontFamily = (fontName: FontName): string => {
+    const sansSerif = [
+      'ui-sans-serif',
+      'system-ui',
+      'sans-serif',
+      'Apple Color Emoji',
+      'Segoe UI Emoji',
+      'Segoe UI Symbol',
+      'Noto Color Emoji'
+    ];
+
+    const serif = [
+      'ui-serif',
+      'Georgia',
+      'Cambria',
+      'Times New Roman',
+      'Times',
+      'serif'
+    ];
+
+    const mono = [
+      'ui-monospace',
+      'SFMono-Regular',
+      'Menlo',
+      'Monaco',
+      'Consolas',
+      'Liberation Mono',
+      'Courier New',
+      'monospace'
+    ];
+
+    if (sansSerif.includes(fontName.family)) {
+      return 'font-sans';
+    }
+    if (serif.includes(fontName.family)) {
+      return 'font-serif';
+    }
+    if (mono.includes(fontName.family)) {
+      return 'font-mono';
+    }
+
     return "font-['" + fontName.family + "']";
   };