tailwindcss: Tailwind 3 broken TS types for config

What version of Tailwind CSS are you using?

3.0.1

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

Next.js 12.0.7

What version of Node.js are you using?

For example: v14.18.1

What browser are you using?

Chrome

What operating system are you using?

macOS

Describe your issue

Documentation says to do this to reference tailwind abstraction from JS:

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

const fullConfig = resolveConfig(tailwindConfig)

fullConfig.theme.width[4]
// => '1rem'

fullConfig.theme.screens.md
// => '768px'

fullConfig.theme.boxShadow['2xl']
// => '0 25px 50px -12px rgba(0, 0, 0, 0.25)'

When I try to do this, I have the following errors in the latest version:

import { TailwindConfig } from 'tailwindcss/tailwind-config';
import resolveConfig from 'tailwindcss/resolveConfig'
import tailwindConfig from '../tailwind.config.js'

const fullConfig = resolveConfig(tailwindConfig as unknown as TailwindConfig)

fullConfig.theme.width[4]
// => TS7053: Element implicitly has an 'any' type because expression of type '4' can't be used to index type 'TailwindThemeValue'. Property '4' does not exist on type 'TailwindThemeValue'.

fullConfig.theme.screens.md
// => TS2339: Property 'md' does not exist on type 'TailwindThemeValue'. Property 'md' does not exist on type '(getters: { theme: any; negative: any; colors: any; breakpoints: any; }) => TailwindValues'

fullConfig.theme.boxShadow['2xl']
// => TS7053: Element implicitly has an 'any' type because expression of type '"2xl"' can't be used to index type 'TailwindThemeValue'. Property '2xl' does not exist on type 'TailwindThemeValue'.

2021-12-12-18-34-15

Seems something wrong with types for the latest release. I use tailwind types to describe my components props, so it’s kind of critical to fix.

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 15 (4 by maintainers)

Most upvoted comments

@sachinraja thanks for the link. It’s quite strange that such popular lib doesn’t have own integrated TS typings yet.

sergeyzwezdin on Dec 14, 2021

We have the same problem. Our temporary solution:

misha-otto on Aug 22, 2022

there is a more convenient solution than using any

const fullConfig = resolveConfig(tailwindConfig);
const width = fullConfig.theme?.width as {[key: string]: string};
const colors = fullConfig.theme?.colors as {[key:string]:string};
console.log(width['4]);
// => '1rem'
console.log(colors['red']);
/* 
{
    "50": "#fef2f2",
    "100": "#fee2e2",
    "200": "#fecaca",
    "300": "#fca5a5",
    "400": "#f87171",
    "500": "#ef4444",
    "600": "#dc2626",
    "700": "#b91c1c",
    "800": "#991b1b",
    "900": "#7f1d1d"
}
*/

JQuery1996 on Feb 9, 2023

For anyone coming to this thread for solutions in the future, now that the config file can be in typescript, using satisfies Config should resolve this issue, eg.

import { Config } from 'tailwindcss/types/config'

export default {
  content: [/* ... */],
  theme: {
     // ...
  },
} satisfies Config

This accomplishes 2 things:

Gives you typechecking so that you know your config values are valid
Allows typescript to infer a more specific type that includes your actual theme values. This should carry through to the resolved config.

Note that without satisfies you could leave out the Config type entirely to get typescript to infer a specific type, but the default inference can get things wrong. For example, I had an error about my font size values, because it inferred that the value '2xs': ['0.625rem', '1rem'] was string[] which isn’t assignable to [string, string]. satisfies allows it to narrow down the type of the array to match the expected tuple type.

baffalop on Oct 13, 2023

Thanks @misha-front that fixed worked. In the meantime I recommend reopening this issue so the missing types can be provided.

benknight on Aug 29, 2022