Closed jpresagios closed 1 month ago
I don't know if it's still relevant but i'm doing exactly what you're trying to do and it's working fine.
import { createTV, VariantProps } from 'tailwind-variants';
export const twMergeConfig = {
extend: {
classGroups: {
'font-size': [{ text: ['xxs'] }],
},
},
};
export type { VariantProps };
export const tv = createTV({
twMergeConfig,
});
I've already faced against A type annotation
is necessary and solved it by adding 🆕 "declaration": true
in my typescript config in the past. Dont know if it will work but you should give a try
Thank you for following up! It's working properly now, so I’m going to close this issue.
Created new package
X
(main goal is shiptwMerge
/tailwind-merge andtv/tailwind-variants
with custom twMergeConfig) and allow to external packages consume these custom functionsimport { twMerge } from 'X'
import { tv } from 'X'
When clients's package from X import twMerge everything works as expected (Return type from
twMerge
is primitive type string that can be resolved by Typescript properly in client's package ofX
)import { twMerge } from 'X'
but when a package import tv
import { tv } from 'X'
following issue appearhttps://github.com/microsoft/TypeScript/issues/42873
error TS2742: The inferred type of 'Y' cannot be named without a reference to '../../../X/node_modules/tailwind-variants/dist/config'. This is likely not portable. A type annotation is necessary.
I have been trying in package
X
to add type annotation during the export of tvexport const tv: <Type Annotation> = createTV(twMergeConfig);
but the return type from createTV use different generic types and wasn't possible because of itexport const tv = createTV(...);
Could you please provide additional information that I should take in consideration to enable X to export custom tailwind variant and consume it on external/client's package ?
As a side note I was wondering if from the point of view of merge next stament is valid and there is not difference from apply twMergeConfig object in X/twMerge over ship twMergeConfig on custom instance variant / createTV
X/twMerge(tv(variants()), classes) === X/twMerge(X/tv(variants()), classes))
(if twMergeConfig=Y is use on X/twMerge under default tv tailwind variant (left expression) result will be the same that ship custom/createTV with twMergeConfig=Y (right expression) or is any benefit from the point of view of merge resolution ?)