Add Tailwind 4

Author: bernaferrari

apps/debug/pages/index.tsx

@@ -9,11 +9,11 @@ export default function Web() {
   const testWarnings = ["This is an example of a conversion warning message."];
 
   return (
-    <div className="flex flex-col p-8 space-y-2">
+    <div className="flex flex-col p-8 gap-2">
       <p className="text-3xl font-bold">Debug Mode</p>
       <div className="h-0.5 bg-gray-100 rounded"></div>
 
-      <div className="flex w-full space-x-2">
+      <div className="flex w-full gap-2">
         <div className="bg-gray-100 p-2 rounded-md">
           <div className="bg-white w-96 shadow-md rounded-md">
             <PluginFigmaToolbar variant="(Light)" />
@@ -56,7 +56,7 @@ export default function Web() {
           <div>
             Plugin dropdown selection (each frame a different breakpoint)
           </div>
-          <div className="flex space-x-4">
+          <div className="flex gap-4">
             <div className="w-24 h-12 bg-red-400"></div>
             <div className="w-12 h-12 bg-green-500"></div>
             <div className="w-4 h-12 bg-blue-600"></div>
@@ -65,7 +65,7 @@ export default function Web() {
 
         <div>
           <div>Outputs from plugin (different screen sizes)</div>
-          <div className="flex space-x-4">
+          <div className="flex gap-4">
             <div className="w-24 h-12 bg-gray-400"></div>
             <div className="w-12 h-12 bg-gray-500"></div>
             <div className="w-4 h-12 bg-gray-600"></div>
@@ -74,7 +74,7 @@ export default function Web() {
 
         <div>
           <div> - Experiment on dark mode (invert colors on output) </div>
-          <div className="flex space-x-4">
+          <div className="flex gap-4">
             <div className="w-24 h-12 bg-gray-900"></div>
             <div className="w-12 h-12 bg-gray-800"></div>
             <div className="w-4 h-12 bg-gray-700"></div>
@@ -106,7 +106,7 @@ export default function Web() {
 }
 
 const PluginFigmaToolbar = (props: { variant: string }) => (
-  <div className="bg-gray-800 w-full h-8 flex items-center text-white space-x-4 px-4">
+  <div className="bg-gray-800 w-full h-8 flex items-center text-white gap-4 px-4">
     <span>Figma to Code {props.variant}</span>
   </div>
 );

apps/plugin/plugin-src/code.ts

@@ -32,6 +32,7 @@ export const defaultPluginSettings: PluginSettings = {
   htmlGenerationMode: "html",
   tailwindGenerationMode: "jsx",
   baseFontSize: 16,
+  useTailwind4: false,
 };
 
 // A helper type guard to ensure the key belongs to the PluginSettings type

packages/backend/src/tailwind/builderImpl/tailwindBorder.ts

@@ -154,7 +154,6 @@ export const tailwindBorderRadius = (node: SceneNode): string => {
       return `-${r}`;
     }
     return "";
-    // }
   };
 
   const radius = getCommonRadius(node);

packages/backend/src/tailwind/builderImpl/tailwindColor.ts

@@ -13,6 +13,7 @@ import {
   htmlRadialGradient,
 } from "../../html/builderImpl/htmlColor";
 import { GradientPaint, Paint } from "../../api_types";
+import { localTailwindSettings } from "../tailwindMain";
 
 /**
  * Get a tailwind color value object
@@ -70,12 +71,23 @@ export const tailwindSolidColor = (
   const { colorName } = getColorInfo(fill);
   const effectiveOpacity = calculateEffectiveOpacity(fill);
 
-  // Only add opacity suffix if it's not 1.0
-  const opacity =
-    effectiveOpacity !== 1.0 ? `/${nearestOpacity(effectiveOpacity)}` : "";
-
-  // example: text-red-500, text-[#123abc], text-custom-color-700/25
-  return `${kind}-${colorName}${opacity}`;
+  // In Tailwind v4, we always use the slash syntax for opacity
+  // In Tailwind v3, we use opacity utilities for standard colors and slash syntax for arbitrary values
+  if (localTailwindSettings.useTailwind4 || colorName.startsWith('[')) {
+    // Only add opacity suffix if it's not 1.0
+    const opacity = effectiveOpacity !== 1.0 
+      ? `/${nearestOpacity(effectiveOpacity)}` 
+      : "";
+    
+    return `${kind}-${colorName}${opacity}`;
+  } else {
+    // Tailwind v3 - use separate opacity utilities for standard colors
+    if (effectiveOpacity !== 1.0) {
+      const opacityValue = nearestOpacity(effectiveOpacity);
+      return `${kind}-${colorName} ${kind}-opacity-${opacityValue}`;
+    }
+    return `${kind}-${colorName}`;
+  }
 };
 
 /**

packages/backend/src/tailwind/builderImpl/tailwindShadow.ts

@@ -1,3 +1,5 @@
+import { localTailwindSettings } from "../tailwindMain";
+
 /**
  * https://tailwindcss.com/docs/box-shadow/
  * example: shadow
@@ -19,7 +21,8 @@ export const tailwindShadow = (node: BlendMixin): string[] => {
           d.color?.b === 0 &&
           Math.abs(d.color?.a - 0.05) < EPSILON
         ) {
-          return "shadow-sm";
+          // shadow-sm → shadow-xs in v4
+          return localTailwindSettings.useTailwind4 ? "shadow-xs" : "shadow-sm";
         } else if (
           d.offset?.x === 0 &&
           d.offset?.y === 1 &&
@@ -30,7 +33,8 @@ export const tailwindShadow = (node: BlendMixin): string[] => {
           d.color?.b === 0 &&
           Math.abs(d.color?.a - 0.1) < EPSILON
         ) {
-          return "shadow";
+          // shadow → shadow-sm in v4
+          return localTailwindSettings.useTailwind4 ? "shadow-sm" : "shadow";
         } else if (
           d.offset?.x === 0 &&
           d.offset?.y === 4 &&
@@ -41,6 +45,7 @@ export const tailwindShadow = (node: BlendMixin): string[] => {
           d.color?.b === 0 &&
           Math.abs(d.color?.a - 0.1) < EPSILON
         ) {
+          // shadow-md stays the same
           return "shadow-md";
         } else if (
           d.offset?.x === 0 &&

packages/backend/src/tailwind/builderImpl/tailwindSize.ts

@@ -2,6 +2,7 @@ import { pxToLayoutSize } from "../conversionTables";
 import { nodeSize } from "../../common/nodeWidthHeight";
 import { numberToFixedString } from "../../common/numToAutoFixed";
 import { TailwindSettings } from "types";
+import { localTailwindSettings } from "../tailwindMain";
 
 /**
  * Formats a size value into a Tailwind class
@@ -96,6 +97,16 @@ export const tailwindSizePartial = (
     );
   }
 
+  // Technically size exists since Tailwind 3.4 (December 2023), but to avoid confusion, restrict to 4,
+  if (localTailwindSettings.useTailwind4) {
+    const wValue = w.substring(2);
+    const hValue = h.substring(2);
+    if (wValue === hValue) {
+      w = `size-${wValue}`;
+      h = "";
+    }
+  }
+
   return {
     width: w,
     height: h,

packages/backend/src/tailwind/conversionTables.ts

@@ -105,7 +105,10 @@ export const pxToFontSize = (value: number): string => {
 };
 
 export const pxToBorderRadius = (value: number): string => {
-  return pxToRemToTailwind(value, config.borderRadius);
+  const conversionMap = localTailwindSettings.useTailwind4
+  ? config.borderRadiusV4
+  : config.borderRadius;
+  return pxToRemToTailwind(value, conversionMap);
 };
 
 export const pxToBorderWidth = (value: number): string | null => {
@@ -117,7 +120,10 @@ export const pxToOutline = (value: number): string | null => {
 };
 
 export const pxToBlur = (value: number): string | null => {
-  return pxToTailwind(value, config.blur);
+  const conversionMap = localTailwindSettings.useTailwind4
+  ? config.blurV4
+  : config.blur;
+  return pxToTailwind(value, conversionMap);
 };
 
 export const pxToLayoutSize = (value: number): string => {

packages/backend/src/tailwind/tailwindConfig.ts

@@ -48,6 +48,19 @@ const borderRadius = {
   10: "full",
 };
 
+// Add a set of v4 mappings for the renamed utilities
+const borderRadiusV4 = {
+  0: "none",
+  0.125: "xs", // sm -> xs
+  0.25: "sm", // (default) -> sm
+  0.375: "md", // unchanged
+  0.5: "lg", // unchanged
+  0.75: "xl", // unchanged
+  1.0: "2xl", // unchanged
+  1.5: "3xl", // unchanged
+  10: "full", // unchanged
+};
+
 const fontSize = {
   0.75: "xs",
   0.875: "sm",
@@ -98,6 +111,18 @@ const blur = {
   64: "3xl",
 };
 
+// Tailwind v4 blur mapping
+const blurV4 = {
+  0: "none",
+  4: "xs", // sm -> xs
+  8: "sm", // blur -> sm
+  12: "md", // unchanged
+  16: "lg", // unchanged
+  24: "xl", // unchanged
+  40: "2xl", // unchanged
+  64: "3xl", // unchanged
+};
+
 const opacity = [0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 95];
 
 // AutoGenerated for Tailwind 2 via [convert_tailwind_colors.js]
@@ -405,13 +430,26 @@ const outline = {
   8: "8",
 };
 
+// Tailwind v4 shadow mapping
+const shadowV4 = {
+  sm: "xs", // sm -> xs
+  DEFAULT: "sm", // (default) -> sm
+  md: "md", // unchanged
+  lg: "lg", // unchanged
+  xl: "xl", // unchanged
+  "2xl": "2xl", // unchanged
+};
+
 export const config = {
   layoutSize,
   borderRadius,
+  borderRadiusV4,
   fontSize,
   lineHeight,
   letterSpacing,
   blur,
+  blurV4,
+  shadowV4,
   opacity,
   color,
   fontWeight,

packages/types/src/types.ts

@@ -16,6 +16,7 @@ export interface TailwindSettings extends HTMLSettings {
   customTailwindPrefix?: string;
   embedVectors: boolean;
   baseFontSize: number;
+  useTailwind4: boolean;
 }
 export interface FlutterSettings {
   flutterGenerationMode: string;