tailwindlabs/tailwindcss-typography

Type error in the config: Binding element 'theme' implicitly has an 'any' type.

illright opened this issue · 3 comments

What version of @tailwindcss/typography are you using?

v0.5.10

What version of Node.js are you using?

v18.18.0

What browser are you using?

N/A

What operating system are you using?

Linux

Reproduction repository

https://stackblitz.com/edit/vitejs-vite-pjylzr?file=tailwind.config.ts

Describe your issue

When accessing the theme function in the tailwind.config.ts file for the typography key, there is a TypeScript error Binding element 'theme' implicitly has an 'any' type..

Here's the problematic config:

import typography from '@tailwindcss/typography';

/** @type {import('tailwindcss').Config} */
export default {
  content: [],
  theme: {
    extend: {
      // Binding element 'theme' implicitly has an 'any' type.
      typography: ({ theme }) => ({
        DEFAULT: {
          css: {
            color: theme('colors.pink[800]'),
          },
        },
      }),
    },
  },
  plugins: [typography],
};

I managed to work around this by importing PluginUtils and making that the type of the { theme } object:

 import type { PluginUtils } from "tailwindcss/types/config";
 export default {
   theme: {
    extend: {
       typography: ({ theme }: PluginUtils) => ({})
    }
  }
}

Thank you! That also worked for me

Thank you

Thanks for this issue!

I'm going to close this now though since we've "v4-ified" the README and with CSS variables it's no longer needed to use the theme function inside the JavaScript config in most cases. Hopefully people will still find this if they need to, though!