Typescript warning when using customized color.

[BeckyWu220]

Hi! Great work in this library, I found it very useful. I'm very impressed that this library included the color customization feature from TailwindCSS. I'm currently trying to use the use customized color in a Typescript app, below is how I defined the customized color, customizedPurple.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {},
    colors: {
      customized: {
        purple: '#5c6ac4'
      }
    }
  },
  variants: {},
  plugins: [],
}

And I was trying to apply the customized color using t.bgCustomizedPurple to the background color of a view.

import { t } from 'react-native-tailwindcss'

export const LoginScreen: React.FunctionComponent<LoginScreenProps> = props => {
    return (
        <View style={t.bgCustomizedPurple}></View>
    )
}

While doing this, I got TypeScript warning Property 'bgCustomizedPurple' does not exist on type 'TailwindStyles'.ts. Is there a good way to resolve this? I've tested to override the color to resolve the warning. For example, I override purple100 with #5c6ac4. However, I'm curious to know if you guys have better way already to handle this. Look forward to your answer. Thanks!

[schettino]

Hey @BeckyWu220, you can extend it adding a file like loaders.d.ts (make sure to include it in the include property in tsconfig.json.

// loaders.d.ts
export {};

declare module "react-native-tailwindcss" {
  import {
    TailwindColors as DefaultTailwindColors,
    TailwindStyles as DefaultTailwindStyles
  } from "react-native-tailwindcss";

  interface CustomColors {
    bgPrimary100: any;
    bgPrimary200: any;
    bgPrimary300: any;
    bgPrimary400: any;
    bgPrimary500: any;
    bgPrimary600: any;
    bgPrimary700: any;
    bgPrimary800: any;
    bgPrimary900: any;
  }

  export interface TailwindStyles extends DefaultTailwindStyles, CustomColors {}
  export interface TailwindColors extends DefaultTailwindColors, CustomColors {}
}

:)

[BeckyWu220]

@schettino Hi! Thank you for replying me so quickly and sharing the detailed code snippet. Appreciate your help! Close the issue now.