html tailwind jit starter doesn't work out of the box

[Bestulo]

Steps I followed

git clone https://github.com/rebelchris/HTML-Tailwind-Starter.git
cd HTML-Tailwind-Starter/
git switch JIT-compiler 
yarn
yarn dev

I get this error:

npm WARN lifecycle The node binary used for scripts is /tmp/yarn--1636864349849-0.11926732229647574/node but npm is using /usr/local/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.

> html-tailwind-starter@1.0.0 build /home/dd/projects/web/HTML-Tailwind-Starter
> postcss styles.css -o src/styles.css

TypeError: Cannot read property 'theme' of undefined
    at _default (/home/dd/projects/web/HTML-Tailwind-Starter/node_modules/tailwindcss/lib/lib/substituteScreenAtRules.js:16:5)
    at /home/dd/projects/web/HTML-Tailwind-Starter/node_modules/@tailwindcss/jit/src/index.js:50:11
    at LazyResult.runOnRoot (/home/dd/projects/web/HTML-Tailwind-Starter/node_modules/postcss/lib/lazy-result.js:339:16)
    at LazyResult.runAsync (/home/dd/projects/web/HTML-Tailwind-Starter/node_modules/postcss/lib/lazy-result.js:391:26)
    at LazyResult.async (/home/dd/projects/web/HTML-Tailwind-Starter/node_modules/postcss/lib/lazy-result.js:221:30)
    at LazyResult.then (/home/dd/projects/web/HTML-Tailwind-Starter/node_modules/postcss/lib/lazy-result.js:206:17)
    at /home/dd/projects/web/HTML-Tailwind-Starter/node_modules/postcss-cli/index.js:233:10
    at async Promise.all (index 0)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! html-tailwind-starter@1.0.0 build: `postcss styles.css -o src/styles.css`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the html-tailwind-starter@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/dd/.npm/_logs/2021-11-14T04_32_30_563Z-debug.log
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[rebelchris]

@Bestulo I just pushed a new version, would you mind checking if that one works?

You do need to use yarn in that case, seems to be an issue with postcss-cli :(

[Bestulo]

It can now turn on well, but it doesn't re-compile the Tailwind styles when the html file is saved.

In order to recompile the CSS, you need to close the process and turn it on again. I think the problem is "dev" has "build" as a one-time thing.

I tried the following and it didn't work:

{
  "scripts" {
    "build": "postcss styles.css -o src/styles.css",
    "build:watch": "postcss styles.css -o src/styles.css -w,
    "dev": "npm run build:watch && live-server src --port=8080"
  }
}

I also tried with concurrently and it didn't work. I'll probably end up using gulp, but I've noticed it takes around 2 second to compile. :C Idk.