tailwindcss: [JIT] Layers are not loaded

What version of Tailwind CSS are you using?

v2.2

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

Laravel Mix v6.0.23

What version of Node.js are you using?

v14.16.0

What browser are you using?

N/A

What operating system are you using?

macOS, Windows, Ubuntu 21.14

Reproduction repository

https://github.com/DarkGhostHunter/tailwindbug/

Describe your issue

When using Laravel Mix (Webpack made simple), an error occurs when trying to add something into any Tailwind CSS layer, like base or components, when using mix.

The watch command watches code changes and updates the code, which BrowserSync catches and reloads the page.

The CSS on question is something like this:

@import "tailwindcss/base"
@layer base {
    p { 
        @apply pb-3;
    }
}

You will receive an error like this when calling yarn watch.

ERROR in ./resources/css/app.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(1:1) \projects\TailwindBug\resources\css\base.css `@layer base` is used but no matching `@tailwind base` directive is present.

   at processResult (\projects\TailwindBug\node_modules\webpack\lib\NormalModule.js:701:19)
    at \projects\TailwindBug\node_modules\webpack\lib\NormalModule.js:807:5
    at \projects\TailwindBug\node_modules\loader-runner\lib\LoaderRunner.js:399:11
    at \projects\TailwindBug\node_modules\loader-runner\lib\LoaderRunner.js:251:18
    at context.callback (\projects\TailwindBug\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
    at Object.loader (\projects\TailwindBug\node_modules\postcss-loader\dist\index.js:140:7)

I’m JavaScript noob so I can’t help but say that building the CSS on development or production doesn’t return the error, using yarn dev or yarn prod, respectively.

Note that this doesn’t happen with JIT disabled:

/* tailwind.config.js */
module.exports = {
    mode: 'jit',
    /* ... */
}

I can only presume loader-runner is the culprit.