fix: prevent adding empty style arrays to parents

__tests__/custom-tailwindcss/__snapshots__/parent-variant.tsx.snap

@@ -1,9 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Custom - Parent Variant Snapshots parent:text-white 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text
     style={
       Array [

__tests__/tailwindcss/__snapshots__/divide-color.tsx.snap

@@ -1,9 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Border - Divide Color divide-amber-50 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -25,9 +23,7 @@ exports[`Border - Divide Color divide-amber-50 1`] = `
 `;
 
 exports[`Border - Divide Color divide-black 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -49,9 +45,7 @@ exports[`Border - Divide Color divide-black 1`] = `
 `;
 
 exports[`Border - Divide Color divide-blue-50 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -73,9 +67,7 @@ exports[`Border - Divide Color divide-blue-50 1`] = `
 `;
 
 exports[`Border - Divide Color divide-cyan-50 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -97,9 +89,7 @@ exports[`Border - Divide Color divide-cyan-50 1`] = `
 `;
 
 exports[`Border - Divide Color divide-emerald-50 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -121,9 +111,7 @@ exports[`Border - Divide Color divide-emerald-50 1`] = `
 `;
 
 exports[`Border - Divide Color divide-fuchsia-50 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -145,9 +133,7 @@ exports[`Border - Divide Color divide-fuchsia-50 1`] = `
 `;
 
 exports[`Border - Divide Color divide-gray-50 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -169,9 +155,7 @@ exports[`Border - Divide Color divide-gray-50 1`] = `
 `;
 
 exports[`Border - Divide Color divide-green-50 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -193,9 +177,7 @@ exports[`Border - Divide Color divide-green-50 1`] = `
 `;
 
 exports[`Border - Divide Color divide-indigo-50 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -217,9 +199,7 @@ exports[`Border - Divide Color divide-indigo-50 1`] = `
 `;
 
 exports[`Border - Divide Color divide-lime-50 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -241,9 +221,7 @@ exports[`Border - Divide Color divide-lime-50 1`] = `
 `;
 
 exports[`Border - Divide Color divide-neutral-50 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -265,9 +243,7 @@ exports[`Border - Divide Color divide-neutral-50 1`] = `
 `;
 
 exports[`Border - Divide Color divide-orange-50 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -289,9 +265,7 @@ exports[`Border - Divide Color divide-orange-50 1`] = `
 `;
 
 exports[`Border - Divide Color divide-pink-50 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -313,9 +287,7 @@ exports[`Border - Divide Color divide-pink-50 1`] = `
 `;
 
 exports[`Border - Divide Color divide-purple-50 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -337,9 +309,7 @@ exports[`Border - Divide Color divide-purple-50 1`] = `
 `;
 
 exports[`Border - Divide Color divide-red-50 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -361,9 +331,7 @@ exports[`Border - Divide Color divide-red-50 1`] = `
 `;
 
 exports[`Border - Divide Color divide-rose-50 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -385,9 +353,7 @@ exports[`Border - Divide Color divide-rose-50 1`] = `
 `;
 
 exports[`Border - Divide Color divide-sky-50 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -409,9 +375,7 @@ exports[`Border - Divide Color divide-sky-50 1`] = `
 `;
 
 exports[`Border - Divide Color divide-slate-50 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -433,9 +397,7 @@ exports[`Border - Divide Color divide-slate-50 1`] = `
 `;
 
 exports[`Border - Divide Color divide-stone-50 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -457,9 +419,7 @@ exports[`Border - Divide Color divide-stone-50 1`] = `
 `;
 
 exports[`Border - Divide Color divide-teal-50 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -481,9 +441,7 @@ exports[`Border - Divide Color divide-teal-50 1`] = `
 `;
 
 exports[`Border - Divide Color divide-transparent 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -505,9 +463,7 @@ exports[`Border - Divide Color divide-transparent 1`] = `
 `;
 
 exports[`Border - Divide Color divide-violet-50 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -529,9 +485,7 @@ exports[`Border - Divide Color divide-violet-50 1`] = `
 `;
 
 exports[`Border - Divide Color divide-white 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -553,9 +507,7 @@ exports[`Border - Divide Color divide-white 1`] = `
 `;
 
 exports[`Border - Divide Color divide-yellow-50 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -577,9 +529,7 @@ exports[`Border - Divide Color divide-yellow-50 1`] = `
 `;
 
 exports[`Border - Divide Color divide-zinc-50 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>

__tests__/tailwindcss/__snapshots__/divide-style.tsx.snap

@@ -1,9 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Border - Divide Style divide-dashed 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -22,9 +20,7 @@ exports[`Border - Divide Style divide-dashed 1`] = `
 `;
 
 exports[`Border - Divide Style divide-dotted 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -43,9 +39,7 @@ exports[`Border - Divide Style divide-dotted 1`] = `
 `;
 
 exports[`Border - Divide Style divide-solid 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>

__tests__/tailwindcss/__snapshots__/divide-width.tsx.snap

@@ -1,9 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Border - Divide Width divide-x 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -23,9 +21,7 @@ exports[`Border - Divide Width divide-x 1`] = `
 `;
 
 exports[`Border - Divide Width divide-x-0 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -45,9 +41,7 @@ exports[`Border - Divide Width divide-x-0 1`] = `
 `;
 
 exports[`Border - Divide Width divide-x-2 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -67,9 +61,7 @@ exports[`Border - Divide Width divide-x-2 1`] = `
 `;
 
 exports[`Border - Divide Width divide-x-4 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -89,9 +81,7 @@ exports[`Border - Divide Width divide-x-4 1`] = `
 `;
 
 exports[`Border - Divide Width divide-x-8 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -111,9 +101,7 @@ exports[`Border - Divide Width divide-x-8 1`] = `
 `;
 
 exports[`Border - Divide Width divide-y 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -133,9 +121,7 @@ exports[`Border - Divide Width divide-y 1`] = `
 `;
 
 exports[`Border - Divide Width divide-y-0 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -155,9 +141,7 @@ exports[`Border - Divide Width divide-y-0 1`] = `
 `;
 
 exports[`Border - Divide Width divide-y-2 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -177,9 +161,7 @@ exports[`Border - Divide Width divide-y-2 1`] = `
 `;
 
 exports[`Border - Divide Width divide-y-4 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -199,9 +181,7 @@ exports[`Border - Divide Width divide-y-4 1`] = `
 `;
 
 exports[`Border - Divide Width divide-y-8 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>

__tests__/tailwindcss/__snapshots__/space-between.tsx.snap

@@ -1,9 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Border - Divide Width space-x-0 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -22,9 +20,7 @@ exports[`Border - Divide Width space-x-0 1`] = `
 `;
 
 exports[`Border - Divide Width space-x-0.5 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -43,9 +39,7 @@ exports[`Border - Divide Width space-x-0.5 1`] = `
 `;
 
 exports[`Border - Divide Width space-x-1 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -64,9 +58,7 @@ exports[`Border - Divide Width space-x-1 1`] = `
 `;
 
 exports[`Border - Divide Width space-x-1.5 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -85,9 +77,7 @@ exports[`Border - Divide Width space-x-1.5 1`] = `
 `;
 
 exports[`Border - Divide Width space-x-96 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -106,9 +96,7 @@ exports[`Border - Divide Width space-x-96 1`] = `
 `;
 
 exports[`Border - Divide Width space-x-px 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -127,9 +115,7 @@ exports[`Border - Divide Width space-x-px 1`] = `
 `;
 
 exports[`Border - Divide Width space-y-0 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -148,9 +134,7 @@ exports[`Border - Divide Width space-y-0 1`] = `
 `;
 
 exports[`Border - Divide Width space-y-0.5 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -169,9 +153,7 @@ exports[`Border - Divide Width space-y-0.5 1`] = `
 `;
 
 exports[`Border - Divide Width space-y-1 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -190,9 +172,7 @@ exports[`Border - Divide Width space-y-1 1`] = `
 `;
 
 exports[`Border - Divide Width space-y-1.5 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -211,9 +191,7 @@ exports[`Border - Divide Width space-y-1.5 1`] = `
 `;
 
 exports[`Border - Divide Width space-y-96 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>
@@ -232,9 +210,7 @@ exports[`Border - Divide Width space-y-96 1`] = `
 `;
 
 exports[`Border - Divide Width space-y-px 1`] = `
-<View
+<View>
-  style={Array []}
->
   <Text>
     A
   </Text>

src/styled.tsx

@@ -35,7 +35,10 @@ export function styled<P>(
     children: componentChildren,
     ...props
   }: StyledProps<P>) {
-    const { hover, focus, active, ...handlers } = useInteraction(props);
+    const { hover, focus, active, ...handlers } = useInteraction({
+      className,
+      ...props,
+    });
 
     const classes = tw ?? className ?? "";
 
@@ -48,7 +51,9 @@ export function styled<P>(
 
     const style = styleProperty
       ? [tailwindStyles, styleProperty]
-      : tailwindStyles;
+      : Array.isArray(tailwindStyles) && tailwindStyles.length > 0
+      ? tailwindStyles
+      : undefined;
 
     let children = isFragment(componentChildren)
       ? // This probably needs to be recursive