Tailwind file watcher exits when using tailwind v3.2.1

[Flying-Toast]

Steps to reproduce:

1. Generate a new app using Phoenix v1.6.15: mix phx.new foobar --no-ecto --no-gettext --no-dashboard --no-live --no-mailer
2. Follow the tailwind installation instructions for Phoenix exactly, making sure you configure it to use version 3.2.1: config :tailwind, version: "3.2.1", default: [ ......]
3. mix phx.server and open your app in browser.
4. In app.css, add the following (below the generated @tailwind directives:

   a {
   @apply text-green-500;
   }

   Notice that the live reloading works and your changes are reflected in the browser. You can change this css and live reload will continue to work.

5. BUT: if you make an error in your app.css:

   a {
   @apply not-a-real-class;
   }

   You will see the following printed in the console:

   
   Rebuilding...
   /snapshot/tailwindcss/node_modules/postcss/lib/input.js:148
     result = new CssSyntaxError(
              ^

CssSyntaxError: tailwindcss: /home/simon/workspace/den_dash/assets/css/app.css:6:2: The not-a-real-class class does not exist. If not-a-real-class is a custom class, make sure it is defined within a @layer directive. at Input.error (/snapshot/tailwindcss/node_modules/postcss/lib/input.js:148:16) at AtRule.error (/snapshot/tailwindcss/node_modules/postcss/lib/node.js:60:32) at processApply (/snapshot/tailwindcss/lib/lib/expandApplyAtRules.js:357:29) at /snapshot/tailwindcss/lib/lib/expandApplyAtRules.js:505:9 at /snapshot/tailwindcss/lib/processTailwindFeatures.js:55:50 at Object.Once (/snapshot/tailwindcss/lib/cli/build/plugin.js:251:19) at LazyResult.runOnRoot (/snapshot/tailwindcss/node_modules/postcss/lib/lazy-result.js:337:23) at LazyResult.runAsync (/snapshot/tailwindcss/node_modules/postcss/lib/lazy-result.js:393:26) { reason: 'The not-a-real-class class does not exist. If not-a-real-class is a custom class, make sure it is defined within a @layer directive.', file: '/home/simon/workspace/den_dash/assets/css/app.css', source: '@import "tailwindcss/base";\n' + '@import "tailwindcss/components";\n' + '@import "tailwindcss/utilities";\n' + '\n' + 'a {\n' + '\t@apply not-a-real-class;\n' + '}\n', line: 6, column: 2, endLine: 6, endColumn: 26, input: { line: 6, column: 2, endLine: 6, endColumn: 26, source: '@import "tailwindcss/base";\n' + '@import "tailwindcss/components";\n' + '@import "tailwindcss/utilities";\n' + '\n' + 'a {\n' + '\t@apply not-a-real-class;\n' + '}\n', url: 'file:///home/simon/workspace/den_dash/assets/css/app.css', file: '/home/simon/workspace/den_dash/assets/css/app.css' }, plugin: 'tailwindcss' }

Now, if you fix the error in app.css:

a { @apply text-red-500; }

your changes will not be reflected in the browser until you kill `mix phx.server` and restart it.

---

If you instead use version 3.1.6: `config :tailwind, version: "3.1.6", default: [ ......]` and repeat the same process, you will see a different error message printed in console:

Rebuilding... CssSyntaxError: tailwindcss: /home/simon/workspace/foobar/assets/css/app.css:6:2: The not-a-real-class class does not exist. If not-a- real-class is a custom class, make sure it is defined within a @layer directive.

4 | 5 | a {

6 | @apply not-a-real-class; | ^ 7 | } 8 |

and things will continue to work once you fix the error (no need to restart phx.server).

[chrismccord]

What does it exit with? Can you provide more information? Thanks!

[Flying-Toast]

Oops, accidentally pressed ctrl-enter, didn't mean to post the issue yet :-)

[Flying-Toast]

@chrismccord finished writing it now :)

[chrismccord]

@apply requires the postcss plugin, which is not shipped with the standalone package. You can opt-in to using node/npm or use this elixir library without @apply. Thanks!

[Flying-Toast]

Ah, thank you!

[Flying-Toast]

@chrismccord Actually, it seems as though live reloading doesn't work at all with tailwind 3.2.1 - if I add a class to an element in one of my templates normally (<p class="text-red-500">abc</p>), I can't get it to be reflected in the browser. With 3.1.6, changes are shown in the browser and live reload works.