Problem with invalid classname in custom CSS using @apply when watching

[rhukster]

What version of Tailwind CSS are you using?

Tailwind 3.2.3

What version of Node.js are you using?

For example: v19.0.1

What browser are you using?

n/a

What operating system are you using?

macOS 12.6

Steps to reproduce

Download the small example test project:

tailwind-crash.zip

Follow the instructions in the README.md

Describe your issue

I use a pretty basic setup with CLI scripts in package.json like this:

{
  "name": "postcss8-tailwind",
  "repository": "",
  "private": true,
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "tailwindcss -i ./css/site.css -o ./build/css/site.css --postcss --minify --watch",
    "prod": "NODE_ENV=production tailwindcss -i ./css/site.css -o ./build/css/site.css --postcss --minify"
  },
  "dependencies": {
    "@tailwindcss/forms": "^0.5.3",
    "@tailwindcss/typography": "^0.5.8",
    "alpinejs": "^3.10.5",
    "postcss-import": "^15.0.0",
    "tailwindcss-debug-screens": "^2.2.1"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.18",
    "tailwindcss": "^3.2.3"
  }
}

Since the JIT, i mainly just use dev script to compile my CSS while watching. The normal and expected behavior when accidentally typing an invalid classname, was the the compiler would see the change, attempt to recompile and spit out an error indicating the line number and invalid class in question. For a few weeks i've noticed that I would not get this neat output, rather it would stack-trace, and I would have to scroll up in the terminal to find the first line that indicated the file, line number and the class in question that was in valid.

For the past couple of days I've noticed that rather than this stack trace, the compile just gets stuck after the Rebuilding... text is output. No errors, no messages. Fixing the bad class, causes the file to recompile again with the Done in XXms message. I now have to notice it got stuck manually exit out of the watch, then manually run the command again from CLI to get the stacktrace that I can then scroll back to find the bad classname.

I've updated everything i can think of, including moving from Node 18 to latest Node 19.0.1. I get this error over multiple projects, so it's not just this one instance. Is there any known issues with the latest version of PostCSS or is this coming from tailwindcss specifically?

Example of the partial StackTrace when running:

➜ npm run dev

> [email protected] dev
> tailwindcss -i ./css/site.css -o ./build/css/site.css --postcss --minify --watch


Rebuilding...
/Users/joe/Projects/www/my-site/theme/custom/node_modules/postcss/lib/input.js:148
      result = new CssSyntaxError(
               ^

CssSyntaxError: tailwindcss: /Users/joe/Projects/www/my-site/theme/custom/css/custom/typography.css:5:5: The `right-0x` class does not exist. If `right-0x` is a custom class, make sure it is defined within a `@layer` directive.
    at Input.error (/Users/joe/Projects/www/my-site/theme/custom/node_modules/postcss/lib/input.js:148:16)
    at AtRule.error (/Users/joe/Projects/www/my-site/theme/custom/node_modules/postcss/lib/node.js:60:32)
    at processApply (/Users/joe/Projects/www/my-site/theme/custom/node_modules/tailwindcss/lib/lib/expandApplyAtRules.js:376:29)
    at /Users/joe/Projects/www/my-site/theme/custom/node_modules/tailwindcss/lib/lib/expandApplyAtRules.js:524:9
    at /Users/joe/Projects/www/my-site/theme/custom/node_modules/tailwindcss/lib/processTailwindFeatures.js:55:50
    at Object.Once (/Users/joe/Projects/www/my-site/theme/custom/node_modules/tailwindcss/lib/cli/build/plugin.js:251:19)
    at LazyResult.runOnRoot (/Users/joe/Projects/www/my-site/theme/custom/node_modules/postcss/lib/lazy-result.js:337:23)
    at LazyResult.runAsync (/Users/joe/Projects/www/my-site/theme/custom/node_modules/postcss/lib/lazy-result.js:393:26)
    at async Object.watch (/Users/joe/Projects/www/my-site/theme/custom/node_modules/tailwindcss/lib/cli/build/plugin.js:348:13)
    at async build (/Users/joe/Projects/www/my-site/theme/custom/node_modules/tailwindcss/lib/cli/build/index.js:40:9) {
  reason: 'The `right-0x` class does not exist. If `right-0x` is a custom class, make sure it is defined within a `@layer` directive.',
  file: '/Users/joe/Projects/www/my-site/theme/custom/css/custom/typography.css',
  source: '[x-cloak] { display: none; }\n' +
    '\n' +
    'body {\n' +
    '  &.debug-screens:before {\n' +
    '    @apply left-inherit right-0x;\n' +
    '  }\n' +
    '\n' +
    '  @apply text-gray-600 tracking-[0.6px] ;\n' +
    '}\n' +
    '\n' +
    '.site-logo {\n' +
    '  img, svg {\n' +
    '    @apply h-full;\n' +

[adamwathan]

Hey! If you can provide a reproduction it’ll make it a lot easier for us to look into this and figure out what the issue is. As a general rule we close issues that don’t include a reproduction as mentioned in the issue template.

[rhukster]

Cheers adam, i'll see if I can recreate this in a small standlone zip

[rhukster]

@adamwathan i've updated the original issue with a zip and steps to reproduce. Thanks.

[adamwathan]

Awesome thank you! Will take a look tomorrow 👍🏻

[thecrypticace]

Hey, thanks for reporting this. I've added explicit logging to make sure we're not relying on any automatic logging from promise rejections (which seemingly doesn't always work).

This will be in our insiders build that should be published in a few minutes: npm install tailwindcss@insiders

[rhukster]

Thanks for addressing this so promptly, it's much appreciated.