diff --git a/src/use-tailwind.web.ts b/src/use-tailwind.web.ts index 228e2a9..4fb4a6b 100644 --- a/src/use-tailwind.web.ts +++ b/src/use-tailwind.web.ts @@ -4,6 +4,7 @@ import { usePlatform } from "./context/platform"; import { RWNCssStyle, UseTailwindCallback, + UseTailwindCallbackOptions, UseTailwindOptions, } from "./use-tailwind"; @@ -11,16 +12,19 @@ import { useTailwind as useNativeTailwind } from "./use-tailwind.native"; export function useTailwind< P extends ViewStyle | TextStyle | ImageStyle | RWNCssStyle ->(options?: UseTailwindOptions): UseTailwindCallback

{ +>(useTailwindOptions?: UseTailwindOptions): UseTailwindCallback

{ const { platform, preview } = usePlatform(); if (platform === "web" && preview) { - return ((className = "") => { - return options?.flatten + return (( + className = "", + { flatten = true }: UseTailwindCallbackOptions = {} + ) => { + return flatten ? classNameToInlineStyle(className) : { $$css: true, tailwindClassName: className }; }) as UseTailwindCallback

; } - return useNativeTailwind

(options); + return useNativeTailwind

(useTailwindOptions); } diff --git a/src/with-styled-props.ts b/src/with-styled-props.ts index 51e66a3..e5d241a 100644 --- a/src/with-styled-props.ts +++ b/src/with-styled-props.ts @@ -40,9 +40,12 @@ export function withStyledProps({ if (typeof value === "string") { if (preview) { styledProps[prop] = undefined; - (mainStyles as unknown as Record)[prop] = tw(value, { - flatten: false, - }); + (mainStyles as unknown as Record)[prop] = ( + tw(value, { + flatten: false, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + }) as any + ).tailwindClassName; } else { const entries = Object.entries(tw(value, { flatten: true })); if (entries.length > 0) {