Cannot read property '700' of undefined

[alexmanzo]

What version of @tailwindcss/typography are you using?

v0.5.0-alpha.2

What version of Node.js are you using?

v16.11.1

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction repository

https://github.com/alexmanzo/alex

Describe your issue

I just set up this repo, so it's basically a blank slate. I installed both tailwindcss@next and @tailwindcss/typography@next. Attempting to run the project results in the following error:

TypeError: Cannot read properties of undefined (reading '700')
    at Object.module.exports [as typography] (alex/node_modules/@tailwindcss/typography/src/styles.js:16:65)

That particular line in the styles.js is:

color: theme('colors.gray.700', colors.gray[700]),

I haven't yet tried overriding the config or anything, but wanted to flag it since these versions are still in alpha! I'd love to be able to use the newest versions as I work on this... happy to try fixes/workarounds!

Edit to add tailwind.config.cjs

const config = {
  content: ['./src/**/*.{html,js,svelte,ts}'],

  theme: {
    extend: {},
  },

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

module.exports = config

[dhaig]

I got the exact same error and the issue was a version discrepancy. Can you run npm list to double-check what versions are installed?

[alexmanzo]

Aha - I will say it magically started working not long after this. I wish I could explain how or why. In any case, npm list does reveal a couple interesting errors that I'll look into with more time:

├── @sveltejs/kit@1.0.0-next.187 invalid: "next" from the root project
├── @tailwindcss/typography@0.5.0-alpha.2
├── autoprefixer@10.3.7
├── cssnano@5.0.8
├── postcss-load-config@3.1.0
├── postcss@8.3.10
├── svelte-check@2.2.7
├── svelte-preprocess@4.9.8
├── svelte@3.44.0
└── tailwindcss@3.0.0-alpha.1 invalid: "next" from the root project


npm ERR! code ELSPROBLEMS
npm ERR! invalid: @sveltejs/kit@1.0.0-next.187 /Users/alexmanzo/code/alex/node_modules/@sveltejs/kit
npm ERR! invalid: tailwindcss@3.0.0-alpha.1 /Users/alexmanzo/code/alex/node_modules/tailwindcss

[chakerben]

i got the same issue , how do you fixed it ?
Thaks

[PeterPenz91]

I got the same issue. from one day to the other I got the error:
Found Tailwind CSS config file: /../vurnished-website/tailwind.config.js Loaded postcss v8.3.6: /../node_modules/postcss Loaded tailwindcss v2.2.7: /../node_modules/tailwindcss [Error - 1:11:21 PM] Tailwind CSS: Cannot read property '700' of undefined TypeError: Cannot read property '700' of undefined at Object.<anonymous> (/Users/pep/Documents/projects/Vloor/Apps/vurnished-website/node_modules/@tailwindcss/typography/src/styles.js:949:38) at Module._compile (internal/modules/cjs/loader.js:1125:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1155:10) at Module.load (internal/modules/cjs/loader.js:982:32) at Module._load (internal/modules/cjs/loader.js:823:14) at Function.f._load (electron/js2c/asar_bundle.js:5:12913) at Module.require (internal/modules/cjs/loader.js:1006:19) at Module.A._require.t.require (/Users/pep/.vscode/extensions/bradlc.vscode-tailwindcss-0.7.2/dist/server/tailwindServer.js:56:287667) at require (internal/modules/cjs/helpers.js:88:18)

building my site fails. I am using Gatsby as a site builder

[atmonshi]

for me, it fixed when I change the tailwindcss/typography to version 0.5.0-alpha.2

[itsfaqih]

I don't think this happen in 0.5.0-alpha.2 because the tailwind 3 color palette is included in 0.5.0-alpha.3 (see #217)
the cause of this error is because you use tailwind 2 which doesn't have the tailwind 3 colors yet

[PeterPenz91]

Thanks for the quick reply. Sry i was not specific enough with my first comment.
I use tailwind version 2 in combination with @tailwind/typography 0.4.1. So yes this has nothing to do with 0.5.0-alpha.3,
but never the less I still get the error which should be not happening if those two versions are meant to be compatible with each other.

updating to tailwind 3.0.0-alpha.2
and @tailwind/typography 0.5.0-alpha.3 are not really an option right now as using two alpha versions in production is not a great solution.

To be more specific:
As soon as I add tailwind/typography to the tailwind config get the error even through the TailwindCSS IntelliSense Extension, which points to this line in /node_modules/@tailwindcss/typography/src/styles.js:949:38:

// Gray color themes

  slate: {
    css: {
      '--tw-prose-body': colors.slate[700],

[chakerben]

fixed by using:
npm install -D tailwindcss@next
npm install -D @tailwindcss/typography@next

[adamwathan]

Closing as this is definitely due to version mismatch — using next for both packages will resolve 👍🏻

[sureshjoshi]

I know this is closed, but just a heads up that I ran into this on a fresh repo as well today. It also pops up in VSCode when I load the Tailwind CSS Intellisense plugin (updated 2 days ago).

Using yarn 3.1.1:

"@headlessui/react": "^1.4.2",
"@heroicons/react": "^1.0.5",
"@tailwindcss/typography": "^0.5.0",
"@tailwindcss/ui": "^0.7.2",
"tailwindcss": "^3.0.0",

In my application and also in VSCode (from Tailwind CSS Intellisense) I get this:

Cannot read property '700' of undefined
    at Object.<anonymous> (/Users/sj/Developer/tailwind3/.yarn/__virtual__/@tailwindcss-typography-virtual-2494e377dc/0/cache/@tailwindcss-typography-npm-0.2.0-a2f9b30b81-0f38d799cb.zip/node_modules/@tailwindcss/typography/src/styles.js:15:40)
    at Module._compile (internal/modules/cjs/loader.js:1125:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1155:10)
    at Module.load (internal/modules/cjs/loader.js:982:32)
    at Function.external_module_.Module._load (/Users/sj/Developer/tailwind3/.pnp.cjs:15467:14)
    at Module.require (internal/modules/cjs/loader.js:1006:19)
    at Module.T._require.t.require (/Users/sj/.vscode/extensions/bradlc.vscode-tailwindcss-0.7.3/dist/server/tailwindServer.js:56:289296)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/Users/sj/Developer/tailwind3/.yarn/__virtual__/@tailwindcss-typography-virtual-2494e377dc/0/cache/@tailwindcss-typography-npm-0.2.0-a2f9b30b81-0f38d799cb.zip/node_modules/@tailwindcss/typography/src/index.js:4:16)
    at Module._compile (internal/modules/cjs/loader.js:1125:30)

I think I tracked it to my Tailwind UI dep.

yarn.lock

"@tailwindcss/ui@npm:^0.7.2":
  version: 0.7.2
  resolution: "@tailwindcss/ui@npm:0.7.2"
  dependencies:
    "@tailwindcss/custom-forms": ^0.2.1
    "@tailwindcss/typography": ^0.2.0
    hex-rgb: ^4.1.0
    postcss-selector-parser: ^6.0.2
  peerDependencies:
    tailwindcss: ^1.8.3
  checksum: 375966b7ae0e32047a6c1cf35fb3d71a53a5f49fb2410e049ba1adac7393574051d2fddc5ee19bff6892371c1ab1ca18a3cfa6f000372593fc20eb74a8198c04
  languageName: node
  linkType: hard

I was able to workaround by setting the resolutions to typography 0.5.0 - but 🤷🏽‍♂️

[sureshjoshi]

Whiiiiiiichhhhhh I now realize may have been incorrectly copied in from an old project, and probably should have been removed 1 whole version ago. 🤦🏽‍♂️

[meri-leeworthy]

I had this 'cannot read property' problem, just tried installing both tailwind and typography plugin @next and now getting an "unclosed bracket" error when I try to add the prose class...

edit: actually this only happens when trying to add it in an @apply rule

[pgarzina]

I got the same issue. from one day to the other I got the error: Found Tailwind CSS config file: /../vurnished-website/tailwind.config.js Loaded postcss v8.3.6: /../node_modules/postcss Loaded tailwindcss v2.2.7: /../node_modules/tailwindcss [Error - 1:11:21 PM] Tailwind CSS: Cannot read property '700' of undefined TypeError: Cannot read property '700' of undefined at Object.<anonymous> (/Users/pep/Documents/projects/Vloor/Apps/vurnished-website/node_modules/@tailwindcss/typography/src/styles.js:949:38) at Module._compile (internal/modules/cjs/loader.js:1125:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1155:10) at Module.load (internal/modules/cjs/loader.js:982:32) at Module._load (internal/modules/cjs/loader.js:823:14) at Function.f._load (electron/js2c/asar_bundle.js:5:12913) at Module.require (internal/modules/cjs/loader.js:1006:19) at Module.A._require.t.require (/Users/pep/.vscode/extensions/bradlc.vscode-tailwindcss-0.7.2/dist/server/tailwindServer.js:56:287667) at require (internal/modules/cjs/helpers.js:88:18)

building my site fails. I am using Gatsby as a site builder

exactly what happened to us as well. A repo that was working yesterday stopped working today. We use a lock file so our lib version are locked, but the app still started to fail, which should not happen.