Property 'white' does not exist on type tailwind types

Question

I'm new in typescript and I'm trying to understand what I am doing wrong.

I've installed @types/tailwindcss version 2.2.4 and I'm trying to create a toast that should use the theme color, so here is the code:

import iziToast, {IziToastSettings} from "izitoast";
import resolveConfig from "tailwindcss/resolveConfig";
import tailwindConfig from "@base/tailwind.config" ;


class Toast {
    config = resolveConfig(tailwindConfig);
    colors = this.config.theme!.colors!;
    default: IziToastSettings = {
        messageColor: this.colors.white,
        iconColor: this.colors!.white,
        position: "topRight",
    }
}

but this.colors.white throws an error saying:

TS2339: Property 'white' does not exist on type 'TailwindThemeColors'

I traced TailwindThemeColors in @types/tailwindcss and it is:

export type TailwindThemeGetter<T> = ((getters: { theme: any; negative: any; colors: any; breakpoints: any }) => T) | T;

export type TailwindThemeColors = TailwindThemeGetter<TailwindValuesColor>;

export interface TailwindValuesColor {
    readonly [key: string]: TailwindColorValue;
}

I removed this part ((getters: { theme: any; negative: any; colors: any; breakpoints: any }) => T) | from it and it worked, but you know, this is an external package and should not be manipulated like this.

I'm trying to understand what I'm doing wrong? and what this line of code that I removed as I didn't find this while I'm researching Typescript documentation.

is there a way to set the correct type without just ignoring the error?

score 1 · Answer 1 · answered Jun 07 '22 at 07:25

export type TailwindThemeGetter<T> = ((getters: { theme: any; negative: any; colors: any; breakpoints: any }) => T) | T;

TailwindThemeGetter<T> is either a function or T so TypeScript wants you to test which it is. Something like:

class Toast {
    config = resolveConfig(tailwindConfig);
    white = typeof (theme?.colors) === 'object' ? theme.colors?.['white'] : 'white';
    default: IziToastSettings = {
        messageColor: this.white,
        iconColor: this.white,
        position: "topRight",
    }
}

You need to handle the case when it is a function so you could have a default color (which I did above) or throw.

Property 'white' does not exist on type tailwind types

1 Answers1