TypeScript Support

[jahirfiquitiva]

I would like to use tailwind.config.ts, but I'm not sure how to type theme in the typography function.

Would you mind helping me out with that?

Thanks!

module.exports = {
  theme: {
    extend: {
      // theme has implicit type any
      typography: (theme) => ({
        DEFAULT: {
          css: {
            color: theme('colors.gray.800'),

            // ...
          },
        },
      }),
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

[wongjn]

I don't know if this is enough to fix the TypeScript error, but theme should be a deconstructed member of the argument:

 extend: {
   // theme has implicit type any
-  typography: (theme) => ({
+  typography: ({ theme }) => ({
     DEFAULT: {

[jahirfiquitiva]

That doesn't fix the error, but thanks

[simonbiennier]

You can use the following:

typography: (theme: PluginAPI["theme"]) => ({ ... })

where PluginAPI comes from import { PluginAPI } from "tailwindcss/types/config";

If you get Object is possibly 'undefined' errors, just use optional chaining (eg. theme("fontSize.base")?.[0]).

[aaronmw]

Not sure if there's a downside but I've been using this:

import type { Config } from 'tailwindcss'
import type { PluginUtils } from "tailwindcss/types/config"
import typographyPlugin from '@tailwindcss/typography'

const config: Config = {
  content: [],
  theme: {
    extend: {
      typography: ({ theme }: PluginUtils) => ({ // <-- Works too
        myTheme: {
          css: {
            "--tw-prose-body": theme("colors.blue.800"),
          },
        },
      }),
    },
  },
  plugins: [typographyPlugin],
}

export default config

[mybearworld]

Caution

This is wrong, I entirely misunderstood the question. Sorry!

No need to type the function:

import type { Config } from 'tailwindcss'

export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config

[aaronmw]

This doesn't actually work. Use an example reflective of the problem:

import type { Config } from 'tailwindcss'
import typographyPlugin from '@tailwindcss/typography'

export default {
  content: [],
  theme: {
    extend: {
      typography: ({ theme }) => ({ // <-- 🚨 Type error 🚨
        myTheme: {
          css: {
            "--tw-prose-body": theme("colors.blue.800"),
          },
        },
      }),
    },
  },
  plugins: [typographyPlugin],
} satisfies Config