tailwindlabs / tailwindcss-typography

Beautiful typographic defaults for HTML you don't control.
https://tailwindcss-typography.vercel.app/
MIT License
4.09k stars 255 forks source link

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

Open illright opened 4 months ago

illright commented 4 months ago

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) => ({})
    }
  }
}
meghantosh commented 1 month ago

Thank you! That also worked for me