[v4] "Cannot read properties of null (reading '50')" when using `theme.extend.colors.zinc: null`

[tordans]

What version of Tailwind CSS are you using?

"tailwindcss": "^4.0.1","@tailwindcss/vite": "^4.0.1",

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

Astro

What version of Node.js are you using?

v22.13.1 (npm v10.9.2)

What browser are you using?

Chrome

What operating system are you using?

macOS

Describe your issue

Tailwind 4 chokes when colors are set to null in the JS config.

I used to have code like this in my config to force only one color of gray and disable the autocomplete and class generation for all other colors:

  theme: {
    extend: {
      colors: {
        gray: colors.stone,
        slate: null,
        zinc: null,
        neutral: null,
        stone: null,
      },
    },
  },

With those settings I am getting errors like

07:13:33 [ERROR] Cannot read properties of null (reading '50')
  Stack trace:
    at /Users/…/Development/…/src/layouts/base.css
    [...] See full stack trace in the browser, or rerun with --verbose.

This error shows when using the npx @tailwindcss/upgrade@next as well as when I update manually (referencing the js config from the css file) and use the vite Plugin in Astro.

---

I see the new way to disable default colors is https://tailwindcss.com/docs/colors#disabling-default-colors which does work once I remove the null lines from my js config.

[wongjn]

Do you have any code/plugins that might be trying to read zinc.50?

[philipp-spiess]

It seems like you are accessing the color zinc.50 somewhere inside your src/layouts/base.css file. Do you mind posting the contents in here and attaching a reproduction case?

[tordans]

This is the open source project https://github.com/FixMyBerlin/radinfra.de/ and here is the commit to update TW 4.

There is no use of zinc in the codebase anymore and the only use before was the zinc: null from the config that I quoted above.

1 result - 1 file

src/layouts/base.css:
  6    --color-slate-*: initial;
  7:   --color-zinc-*: initial;
  8    --color-neutral-*: initial;

[philipp-spiess]

Thanks for sharing that! I think this is because you're using the typography plugin which internally does have references to the zinc theme: https://github.com/tailwindlabs/tailwindcss-typography/blob/main/src/styles.js So deleting the colors would break the plugin. I'm confused this worked in v3 at all though, since it doesn't seem like it should 🤔

Something that could work is to remove the --color-zinc-*: initial; from CSS for now and keep it inside the JS config. Do you mind trying this? If this behaves the same, then I'd recommend keeping the zinc scale in for now (since it is used by your project).

[tordans]

@philipp-spiess thanks a lot for looking into this.

I am not sure, yet, this is the root cause, yet. See this case: I remove the --color-zinc-*: initial (all of them) and added the zinc:null. Right away the Astro dev process reloads and shows the error.

• Then remove the typography plugin => auto reload => same error
• Then remove all plugins => same

This confirms, that the error

1. happens with the vite plugin
2. happens with the update script
3. happens without plugins, so it has to be something plugin unrelated

I tried creating a minimal reproduction with play.tailwind but it looks like there is no way to use v4 and the js-config, unfortunately.

• v4 with color removed in css works as expected https://play.tailwindcss.com/8whvFAXiog?file=css
• v3 works as expected with plugins and null https://play.tailwindcss.com/jKPnXkzJTg?file=config

[philipp-spiess]

Can you remove the typography plugin and then restart the build? That's the only place I found where we access a property of the value 50 from the zinc namespace.

[wongjn]

I was able to reproduce the same error in a different way (as well as their steps):

1. Remove all plugins
2. Set theme.extend.colors.green to null
3. Run vite

See backtrace:

TypeError: Cannot read properties of null (reading '50')
    at Bt (file:///path/to/project/node_modules/tailwindcss/dist/lib.mjs:6306:10)
    at file:///path/to/project/node_modules/tailwindcss/dist/lib.mjs:6248:45
    at file:///path/to/project/node_modules/tailwindcss/dist/lib.mjs:6260:7
    at accentColor (file:///path/to/project/node_modules/tailwindcss/dist/chunk-3FWCBO63.mjs:1:7121)
    at o (file:///path/to/project/node_modules/tailwindcss/dist/lib.mjs:6920:38)
    at fn (file:///path/to/project/node_modules/tailwindcss/dist/lib.mjs:6937:39)
    at et (file:///path/to/project/node_modules/tailwindcss/dist/lib.mjs:6875:11)
    at pr (file:///path/to/project/node_modules/tailwindcss/dist/lib.mjs:7332:29)
    at gr (file:///path/to/project/node_modules/tailwindcss/dist/lib.mjs:7294:11)
    at async mr (file:///path/to/project/node_modules/tailwindcss/dist/lib.mjs:7643:11)

With unminified Tailwind build for clearer function names:

TypeError: Cannot read properties of null (reading '50')
    at get (file:///path/to/project/node_modules/tailwindcss/dist/lib.mjs:7233:12)
    at file:///path/to/project/node_modules/tailwindcss/dist/lib.mjs:7144:71
    at theme (file:///path/to/project/node_modules/tailwindcss/dist/lib.mjs:7165:7)
    at accentColor (file:///path/to/project/node_modules/tailwindcss/dist/chunk-FV4V7PZI.mjs:635:54)
    at resolveValue (file:///path/to/project/node_modules/tailwindcss/dist/lib.mjs:8039:14)
    at mergeTheme (file:///path/to/project/node_modules/tailwindcss/dist/lib.mjs:8069:22)
    at resolveConfig (file:///path/to/project/node_modules/tailwindcss/dist/lib.mjs:7972:27)
    at upgradeToFullPluginSupport (file:///path/to/project/node_modules/tailwindcss/dist/lib.mjs:8574:28)
    at applyCompatibilityHooks (file:///path/to/project/node_modules/tailwindcss/dist/lib.mjs:8536:15)
    at async parseCss (file:///path/to/project/node_modules/tailwindcss/dist/lib.mjs:8962:15)

While debugging, at this point:

tailwindcss/packages/tailwindcss/src/compat/plugin-functions.ts

Line 72 in 50bafce

get(configValueCopy, key.split('-')) !== undefined

configValueCopy = {
  …
  green: null,
  …
}

key = 'green-50'

Which causes the get() function to throw the type error.

I can try to write a test for this tomorrow if you don't beat me to it.

[wongjn]

Huzzah

let { build } = await compile(
  css`
    @theme default {
      --color-red-50: oklch(0.971 0.013 17.38);
    }
    @config "./my-config.js";
    @tailwind utilities;
  `,
  {
    loadModule: async () => {
      return {
        module: {
          theme: {
            extend: {
              colors: {
                red: null,
              },
            },
          },
        },
        base: '/root',
      }
    },
  },
)

build([])

TypeError: Cannot read properties of null (reading '50')
 ❯ get src/compat/plugin-functions.ts:227:9
    225| 
    226|     // The key does not exist so concatenate it with the next key
    227|     if (obj[key] === undefined) {
       |         ^
    228|       if (path[i + 1] === undefined) {
    229|         return undefined
 ❯ src/compat/plugin-functions.ts:72:13
 ❯ theme src/compat/plugin-functions.ts:105:5
 ❯ accentColor src/compat/default-theme.ts:60:31
 ❯ resolveValue src/compat/config/resolve-config.ts:200:14
 ❯ mergeTheme src/compat/config/resolve-config.ts:245:22
 ❯ Module.resolveConfig src/compat/config/resolve-config.ts:86:27
 ❯ upgradeToFullPluginSupport src/compat/apply-compat-hooks.ts:246:28
 ❯ Module.applyCompatibilityHooks src/compat/apply-compat-hooks.ts:185:15
 ❯ parseCss src/index.ts:519:15

[philipp-spiess]

@wongjn Thanks for putting together this amazing repro ❤

[philipp-spiess]

Hey all! I just merged a fix for the crash. This will be out with the upcoming patch release. Thank you again!