<Tailwind config={tailwindConfig}> not working with

[andrecasal]

Describe the Bug

If the tailwind.config.tscontains a plugin with ES6 exports, the config attribute will give this TS error:

Type '{ content: string[]; darkMode: "class"; theme: { container: { center: true; padding: string; screens: { '2xl': string; }; }; extend: { colors: { input: { DEFAULT: string; invalid: string; }; primary: { DEFAULT: string; foreground: string; }; ... 4 more ...; card: { ...; }; }; fontFamily: { ...; }; fontSize: { ...; }...' is not assignable to type 'TailwindConfig'.
  Types of property 'plugins' are incompatible.
    Type '({ handler: PluginCreator; config?: Partial<Config> | undefined; } | { handler: (helpers: Helpers) => void; })[]' is not assignable to type '(PluginCreator | { handler: PluginCreator; config?: Partial<Config> | undefined; } | { (options: any): { handler: PluginCreator; config?: Partial<...> | undefined; }; __isOptionsFunction: true; } | undefined)[]'.
      Type '{ handler: PluginCreator; config?: Partial<Config> | undefined; } | { handler: (helpers: Helpers) => void; }' is not assignable to type 'PluginCreator | { handler: PluginCreator; config?: Partial<Config> | undefined; } | { (options: any): { handler: PluginCreator; config?: Partial<...> | undefined; }; __isOptionsFunction: true; } | undefined'.
        Type '{ handler: PluginCreator; config?: Partial<Config> | undefined; }' is not assignable to type 'PluginCreator | { handler: PluginCreator; config?: Partial<Config> | undefined; } | { (options: any): { handler: PluginCreator; config?: Partial<...> | undefined; }; __isOptionsFunction: true; } | undefined'.
          Type '{ handler: import("/Users/andrecasal/Developer/Apps/andrecasal.com/node_modules/.pnpm/[email protected]/node_modules/tailwindcss/types/config").PluginCreator; config?: Partial<...> | undefined; }' is not assignable to type '{ handler: import("/Users/andrecasal/Developer/Apps/andrecasal.com/node_modules/.pnpm/[email protected][email protected]/node_modules/tailwindcss/types/config").PluginCreator; config?: Partial<...> | undefined; }'.
            Types of property 'config' are incompatible.
              Type 'Partial<import("/Users/andrecasal/Developer/Apps/andrecasal.com/node_modules/.pnpm/[email protected]/node_modules/tailwindcss/types/config").Config> | undefined' is not assignable to type 'Partial<import("/Users/andrecasal/Developer/Apps/andrecasal.com/node_modules/.pnpm/[email protected][email protected]/node_modules/tailwindcss/types/config").Config> | undefined'.
                Type 'Partial<import("/Users/andrecasal/Developer/Apps/andrecasal.com/node_modules/.pnpm/[email protected]/node_modules/tailwindcss/types/config").Config>' is not assignable to type 'Partial<import("/Users/andrecasal/Developer/Apps/andrecasal.com/node_modules/.pnpm/[email protected][email protected]/node_modules/tailwindcss/types/config").Config>'.
                  Types of property 'safelist' are incompatible.
                    Type '(string | { pattern: RegExp; variants?: string[] | undefined; } | undefined)[] | undefined' is not assignable to type 'Partial<SafelistConfig> | undefined'.
                      Type '(string | { pattern: RegExp; variants?: string[] | undefined; } | undefined)[]' is not assignable to type 'Partial<SafelistConfig> | undefined'.
                        Type '(string | { pattern: RegExp; variants?: string[] | undefined; } | undefined)[]' is not assignable to type '(string | undefined)[]'.ts(2322)
index.d.ts(6, 5): The expected type comes from property 'config' which is declared here on type 'IntrinsicAttributes & TailwindProps'
(property) TailwindProps.config?: TailwindConfig | undefined

The tailwind plugin:

export const designSystem = plugin(...)

This would fix it:

const designSystem = plugin(...)
module.exports = { designSystem }

But now there's a TS error in tailwind.config.ts:

Module '"./tailwind/plugins/design-system.ts"' declares 'designSystem' locally, but it is not exported.

Because tsconfig.json is configured with "moduleResolution": "nodenext".

Which package is affected (leave empty if unsure)

No response

Link to the code that reproduces this issue

NA

To Reproduce

1. Create plugin with ES6 export and add it to the tailwind.config.ts plugins array
2. Add this to your tsconfig.json file:

{
	"include": [
		"**/*.ts",
		"**/*.tsx"
	],
	"compilerOptions": {
		"lib": [
			"DOM",
			"DOM.Iterable",
			"ES2022"
		],
		"isolatedModules": true,
		"esModuleInterop": true,
		"jsx": "react-jsx",
		"module": "nodenext",
		"moduleResolution": "nodenext", // 👈 this is the line that matters
		"resolveJsonModule": true,
		"target": "ES2022",
		"strict": true,
		"noImplicitAny": true,
		"allowJs": true,
		"forceConsistentCasingInFileNames": true,
		"baseUrl": ".",
		"paths": {
			"~/*": [
				"./app/*"
			],
			"tests/*": [
				"./tests/*"
			]
		},
		"skipLibCheck": true,
		"allowImportingTsExtensions": true,
		"noEmit": true
	}
}

4. Use the <Tailwind config={tailwindConfig}> component and see the error

Expected Behavior

No TS error.

What's your node version? (if relevant)

18.2.0

[J4v4Scr1pt]

I ran in to the same issue.

Sounds stupid and I don't know the exakt impact with doing this.. But I removed /** @type {import('tailwindcss').Config} */ from the top of my tailwindConfig. Now I can use it with no errors.. everything seems to work as expected for me with auto-complete etc...

But my use of this lib is only limited to generate the HTML to paste in another project sending the Emails...

[gabrielmfern]

Are you sure the issue is due to exports? From the Typescript error you are showing, it seems like your Tailwind version and our Tailwind version are not the same, which might be the cause of this.

Type 'Partial<import("node_modules/.pnpm/[email protected]/node_modules/tailwindcss/types/config").Config> | undefined' 
is not assignable to type 'Partial<import(node_modules/.pnpm/[email protected][email protected]/node_modules/tailwindcss/types/config").Config> | undefined'.

Notice the 3.2.7 (ours) and the 3.3.2 (yours).

Also, please, provide a reproduction repo here, as I couldn't quite follow the “To reproduce” section.

[gabrielmfern]

Closing this as stale.