fix: tailwind parser preflight must not overwrite inline styles on paste

apps/builder/app/shared/tailwind/tailwind.test.tsx

@@ -219,6 +219,65 @@ test("add preflight matching tags when no classes are used", async () => {
   );
 });
 
+test("preflight does not overwrite inline styles", async () => {
+  // <a style="color: white"> — preflight sets color: inherit, must not win
+  expect(
+    await generateFragmentFromTailwind(
+      renderTemplate(
+        <ws.element
+          ws:tag="a"
+          ws:style={css`
+            color: white;
+          `}
+        ></ws.element>
+      )
+    )
+  ).toEqual(
+    renderTemplate(
+      <ws.element
+        ws:tag="a"
+        ws:style={css`
+          color: white;
+          text-decoration: inherit;
+        `}
+      ></ws.element>
+    )
+  );
+});
+
+test("preflight does not overwrite h1 inline styles", async () => {
+  // <h1 style="font-size: clamp(...); font-weight: 700; margin-bottom: 1.5rem">
+  // preflight resets font-size, font-weight, margin to 0/inherit — must not win
+  expect(
+    await generateFragmentFromTailwind(
+      renderTemplate(
+        <ws.element
+          ws:tag="h1"
+          ws:style={css`
+            font-size: clamp(2.5rem, 5vw, 4rem);
+            font-weight: 700;
+            margin-bottom: 1.5rem;
+          `}
+        ></ws.element>
+      )
+    )
+  ).toEqual(
+    renderTemplate(
+      <ws.element
+        ws:tag="h1"
+        ws:style={css`
+          font-size: clamp(2.5rem, 5vw, 4rem);
+          font-weight: 700;
+          margin-bottom: 1.5rem;
+          margin-top: 0;
+          margin-right: 0;
+          margin-left: 0;
+        `}
+      ></ws.element>
+    )
+  );
+});
+
 test("extract states from tailwind classes", async () => {
   expect(
     await generateFragmentFromTailwind(

apps/builder/app/shared/tailwind/tailwind.ts

@@ -404,7 +404,8 @@ export const generateFragmentFromTailwind = async (
   };
   const createOrMergeLocalStyles = (
     instanceId: Instance["id"],
-    newStyles: StyleDecl[]
+    newStyles: StyleDecl[],
+    { skipExisting = false }: { skipExisting?: boolean } = {}
   ) => {
     const localStyleSource =
       getLocalStyleSource(instanceId) ?? createLocalStyleSource(instanceId);
@@ -422,6 +423,11 @@ export const generateFragmentFromTailwind = async (
         value: parsedStyleDecl.value,
       };
       const styleDeclKey = getStyleDeclKey(styleDecl);
+      // preflight is a browser reset baseline and must not overwrite
+      // explicit styles already set from inline style attributes
+      if (skipExisting && styles.has(styleDeclKey)) {
+        continue;
+      }
       styles.delete(styleDeclKey);
       styles.set(styleDeclKey, styleDecl);
     }
@@ -430,7 +436,9 @@ export const generateFragmentFromTailwind = async (
   for (const instance of fragment.instances) {
     const tag = instance.tag;
     if (tag && preflight[tag]) {
-      createOrMergeLocalStyles(instance.id, preflight[tag]);
+      createOrMergeLocalStyles(instance.id, preflight[tag], {
+        skipExisting: true,
+      });
     }
   }