tailwindcss: TypeError: Cannot read properties of undefined (reading '700')

@samehsy could you update the version of @tailwindcss/typography you’re using?

This is causing issues with older versions of @tailwindcss/forms as well.

I specifically had the problem using nuxt/tailwindcss-module with "@tailwindcss/typography": "^0.5.0", , which seems to not be compatible anymore with tailwindcss < 3.0.0.

The Nuxt TailwindCSS module uses tailwind:“^2.0.4” and is not upgraded yet to Tailwind 3, see https://github.com/nuxt-community/tailwindcss-module/pull/407

Downgrading to "@tailwindcss/typography": "^0.4.1", works for me!

Try the latest: npm i @tailwindcss/typography@latest 😃

(You may want to update the forms as well, npm i @tailwindcss/forms@latest.)

Can we re-open this issue? It’s still happening.

@tailwind/ui needs to update the @tailwind/typography dependency to ^0.5.0 in order to fix the issue and work with v3, otherwise we can’t use @tailwind/ui on v3 yet.

Remove @tailwindcss/ui, that package was made obsolete when Tailwind CSS v2.0 was released back in 2020 👍🏻

I also found this issue in 0.5.2, so I have also downgraded to 0.4.1 to resolve it.

default nuxt3 installation here with tailwindcss ^3.0.7:

"devDependencies": {
    "autoprefixer": "^10.4.0",
    "nuxt3": "latest",
    "postcss": "^8.4.5",
    "sass": "^1.45.0",
    "sass-loader": "^12.4.0",
    "tailwindcss": "^3.0.7"
  },
  "dependencies": {
    "@headlessui/vue": "^1.4.2",
    "@tailwindcss/aspect-ratio": "^0.4.0",
    "@tailwindcss/forms": "^0.4.0",
    "@tailwindcss/line-clamp": "^0.3.0",
    "@tailwindcss/typography": "^0.5.0",
    "@tailwindcss/ui": "^0.7.2"
  }

It appears ^0.5.0 and ^0.4.0 are latest for typography and forms respectively. Still receiving this error on build:

11:45:56 AM [vite] Internal server error: Cannot read property '700' of undefined                                                                                                                                                        11:45:56
  Plugin: vite:css
  File: ./assets/tailwind.scss
      at Object.<anonymous> (.\node_modules\@tailwindcss\ui\node_modules\@tailwindcss\typography\src\styles.js:15:40)

Tailwind config js:

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

module.exports = {
    purge: {
        content: [
            `components/**/*.{vue,js}`,
            `layouts/**/*.vue`,
            `pages/**/*.vue`,
            `plugins/**/*.{js,ts}`,
            `nuxt.config.{js,ts}`,
        ],
    },
    darkMode: 'class', // or 'media' or 'class'
    mode: 'jit',
    theme: {
        extend: {
            fontFamily: {
                sans: ['Inter', ...defaultTheme.fontFamily.sans],
            },
            overflow: ['hover', 'focus'],
            typography: {
                '3xl': {
                    css: {
                        fontSize: '1.875rem',
                        h1: {
                            fontSize: '4rem',
                        },
                    },
                },
            },
        },
    },
    variants: {
        extend: {
            backgroundColor: ['active', 'focus', 'hover'],
        },
    },
    plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/ui'),
    ],
};

I’ve attempted to downgrade typography to 0.4.1 with no luck.

UPDATE: This appears to have been caused by @tailwindcss/ui requirement in the plugins section of tailwind.config.js. Removing that allows the app to build.

I do not have tailwindcss/ui dependency but I still have this issue in typography pugin version above 0.4.1 😕

None of the highest voted answered fix this for me. As mklueh stated: ‘“@tailwindcss/typography”: “^0.4.1”,’

I had this issue too after installing @tailwind/typography, but I had forgotten to update Tailwind to version 3 from 2 in an old project. Tailwind 3 came out in November 2021, so I’m sure I’m not the only one. 😅

npm i @tailwindcss/forms@latest

Thanks, It fixed the problem. 😃

Could you change the colors.gray.700 to just colors.gray?

@nbgoodall thank you I appreciate your help …you are right I forgot to update @tailwindcss/typography @bolshoytoster also thanks

I’m experiencing the same issue related to the ‘700’ property.

/node_modules/@tailwindcss/ui/node_modules/@tailwindcss/typography/src/styles.js:15:40

This seems like to be an outdated dependency in the @tailwind/ui package. I have explored the package and noticed it uses "@tailwindcss/typography": "^0.2.0" and tailwind 3.0 only works with "@tailwindcss/typography": "^0.5.0".

Google brought me here with the same issue - and same embarrassing omission on my part: had forgotten to update typography . thanks a bunch