Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Internal server error: Cannot read property 'theme' of undefined

See original GitHub issue

Describe the bug

I am trying to use @tailwindcss/jit with Vite. I have followed the documentation and various articles online on how to configure it but it fails whenever I run yarn dev. I get an error.

Reproduction

https://github.com/BreakInvent/breakinvent-website.git

System Info

System:
    OS: macOS 11.2.1
    CPU: (8) x64 Intel(R) Core(TM) i7-8557U CPU @ 1.70GHz
    Memory: 1.38 GB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 12.19.0 - ~/.nvm/versions/node/v12.19.0/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v12.19.0/bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v12.19.0/bin/npm
  Browsers:
    Chrome: 91.0.4472.114
    Edge: 91.0.864.48
    Firefox: 89.0
    Safari: 14.0.3
  npmPackages:
    vite: ^2.3.8 => 2.3.8

Used Package Manager

yarn

Logs

07:01:33 [vite] Internal server error: Cannot read property 'theme' of undefined
  Plugin: vite:css
  File: /Users/xxxxxx/xxxxxx/assets/css/style.css
      at _default (/Users/xxxxxx/xxxxxx/node_modules/tailwindcss/lib/lib/substituteScreenAtRules.js:16:5)
      at /Users/xxxxxx/xxxxxx/node_modules/@tailwindcss/jit/src/index.js:50:11
      at LazyResult.runOnRoot (/Users/xxxxxx/xxxxxx/node_modules/postcss/lib/lazy-result.js:339:16)
      at LazyResult.runAsync (/Users/xxxxxx/xxxxxx/node_modules/postcss/lib/lazy-result.js:391:26)
      at LazyResult.async (/Users/xxxxxx/xxxxxx/node_modules/postcss/lib/lazy-result.js:221:30)
      at LazyResult.then (/Users/xxxxxx/xxxxxx/node_modules/postcss/lib/lazy-result.js:206:17)

Validations

Follow our Code of Conduct
Read the Contributing Guidelines.
Read the docs.
Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
Make sure this is a Vite issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.