I want to access my theme config in my source code using typescript. The following works, because of the any, but I want to use Typescript properly. When I remove the as any I always and up with this property doesn't exist or similar typescript errors.
import resolveConfig from 'tailwindcss/resolveConfig'; import tailwindConfig from '../../../../tailwind.config'; const {theme: {screens}} = resolveConfig(tailwindConfig) as any; console.log(screens.md) removing 'as any' leads to error:
Property 'screens' does not exist on type 'UnwrapResolvables<{ extend: { colors: { "bento-main": string; "bento-bg": string; "bento-sub": string; "bento-sub-alt": string; "bento-text": string; }; content: { gear: string; }; inset: { 'shadow-spread': string; }; gap: { 'y-mansonry': string; 'x-mansonry': string; }; }; }>'.ts(2339 I guess the following type in tailwindcss/resolveConfig.d.ts leads to Typescript expecting a theme.extend, which doesn't exist at runtime. So typescript doesn't complain when I access my theme.extend. values, but that in turn fails at runtime.
type ResolvedConfig<T extends Config> = Omit<T, 'theme'> & { theme: UnwrapResolvables<T['theme']> } I wonder why I'm not able to find someone who did this before, since tailwind is so popular and accessing theme values should be a very common occurence. Are you able to construct a google search that finds source code that did this? And/Or do you now how to use the tailwind's typescript types properly?
