Type definitions for defaultTheme is incorrectly too generic

[jlachniet]

What version of Tailwind CSS are you using?

v3.1.4

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

Next.js v12.1.6

What version of Node.js are you using?

v16.13.2

What browser are you using?

N/A

What operating system are you using?

Windows 11 Pro

Reproduction URL

https://www.typescriptlang.org/play?filetype=js#code/PTAEAEBcGcFoGMAWBTeBrAUB+B7AdtJKACbIBmAhgK4A2kAKigLbKgC8oATsgI5UCW3ABQBySBX40A7vzzF40aMFKVaDZshEBKANxZgAKgMRIATwAOrAN78m5nJ0ijxkmXIXRtAOgDC+MvwA5gC+oAbA2PiEoLh4AYHsoFYYAJCxkMh4kABcoADaIl7A0JzwhuEGXlYwADQwAB41HsEiALo1qZAauckpKcj1GXI9qX1k+JAAYhRMkqYjfX3QFAS5BQCSWcicIjUk5NR0jMgsXuNZ07M0pl7LBO2jKcEdfc+pb8F6GEw4xLTIXgG9kc0ESsXieiAA

Describe your issue

Hello,

Since the latest update to Tailwind which includes built in TypeScript definitions, I have been encountering some trouble with the type definitions for defaultTheme which I did not encounter with the unofficial DefinitelyTyped type definitions. I use TypeScript for my project, but because Tailwind configs use JavaScript, I use an @ts-check comment in my config to enable type checking.

In my config, I want to replace the default sans-serif font with a custom font. A minimal config that does that looks like this:

// @ts-check

/** @type {import('tailwindcss').Config} */
const config = {
	content: ['./src/**/*.{ts,tsx,css}'],
	theme: {
		extend: {
			fontFamily: {
				sans: ['Inter', 'sans-serif'],
			},
		},
	},
};

module.exports = config;

While this works, I would ideally like to replace the sans-serif with the system font stack provided by Tailwind. This would be done like this:

// @ts-check

const defaultTheme = require('tailwindcss/defaultTheme');

/** @type {import('tailwindcss').Config} */
const config = {
	content: ['./src/**/*.{ts,tsx,css}'],
	theme: {
		extend: {
			fontFamily: {
				sans: ['Inter', defaultTheme.fontFamily.sans],
			},
		},
	},
};

module.exports = config;

Unfortunately, TypeScript throws a few errors when using defaultTheme. After looking at the type definitions, it appears that the issue is that the type of defaultTheme is based on the types used to annotate user configs, i.e. the same type definition referenced in line 5 of the second example. The issue with this is that the type of defaultTheme is too generic. While user configs do not need to include the theme property, defaultTheme is a defined object. In addition, fontFamily (and many other keys) are incorrectly optional in defaultTheme.

While I am not very well familiar with the current type definitions for Tailwind, my guess is that the solution to this issue would be to create a separate type definition for defaultTheme.

Thank you for adding TypeScript definitions to your framework, as they are very useful, and any help with this issue would be greatly appreciated.

[lifeiscontent]

fwiw, it seems like this type would benefit from Module Augmentation via an interface

[thecrypticace]

I just merged in the fix for this! Gonna tag a release today :)