Official plugins are not allowed in the `TailwindConfig` type definitions

[josephkerkhof]

What version of Tailwind CSS are you using?

v3.1.0

What build tool (or framework if it abstracts the build tool) are you using?

@craco/[email protected]

What version of Node.js are you using?

v16.13.1

What browser are you using?

N/A

What operating system are you using?

macOS

Reproduction

tailwind.config.js 👇🏻

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  plugins: [require('@tailwindcss/forms')],
}

src/MyComponent.tsx 👇🏻

import resolveConfig from 'tailwindcss/resolveConfig';
import tailwindConfig from '../tailwind.config.js';

export function MyComponent() {
  const fullConfig = resolveConfig(tailwindConfig);
}

Then, I receive the error

Argument of type '{ content: string[]; plugins: ((options?: { ...; } | undefined) => Function)[]; }' is not assignable to parameter of type 'TailwindConfig'. Types of property 'plugins' are incompatible. Type '((options?: { strategy?: "base" | "class" | undefined; } | undefined) => Function)[]' is not assignable to type 'TailwindPlugin<any>[]'. Type '(options?: { strategy?: "base" | "class" | undefined; } | undefined) => Function' is not assignable to type 'TailwindPlugin<any>'.

Describe your issue

My tailwindConfig object doesn't pass type validation in the resolveConfig() function when an official plugin is included.

What I expect

Official plugins are allowed in the TailwindConfig type definitions.

[nawok]

I wanted to file a similar issue but then I noticed this one. I would like to share my observation too.

When I enable @ts-check I get the squigglies under the plugin reference and the sans member of the font family.

[naquiroz]

Also, resolveConfig doesn't have types.

[bradlc]

Hey @musicaljoeker. We have been through and added/updated types for all of our first-party plugins, so everything should be compatible now 👍

However, it's worth noting that your error message contains references to TailwindConfig and TailwindPlugin types which do not exist in the tailwindcss package. It's likely that these types are actually coming from @types/tailwindcss, so you may want to double-check your TypeScript setup to ensure you are using the official types 👍