How to access tailwind theme values in source code with typescript

Question

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?

Does this help you? github.com/tailwindlabs/tailwindcss/issues/8920 — Timmy Chan
– Timmy Chan, Commented Jul 21, 2023 at 13:00

Sakar · Accepted Answer · 2024-02-05 06:35:21Z

0

From this answer inside tailwind-resolve-config.d.ts in your types/typings directory

declare module 'tailwindcss/resolveConfig' {
    import type { Config } from 'tailwindcss';

    declare function resolveConfig(config: Config): Config;
    export = resolveConfig;
}

answered Feb 5, 2024 at 6:35

Sakar

6668 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to access tailwind theme values in source code with typescript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related