Laravel mix does not work with tailwind css

[Kallal103]

Hello,
I am getting the following error when I am running npm run dev :
ERROR Failed to compile with 2 errors 10:19:16 PM

error in ./resources/sass/app.scss

Syntax Error: ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError

(4:3) @apply cannot be used with .bg-button because .bg-button either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that .bg-button exists, make sure that any @import statements are being properly processed before Tailwind CSS sees your CSS, as @apply can only be used for classes in the same CSS tree.

2 | @tailwind components;
3 | .button {

4 | @apply bg-button text-white no-underline rounded-lg text-sm py-2 px-5;
| ^
5 | box-shadow: 0 2px 7px 0 #b0eaff;
6 | }

error in ./resources/sass/app.scss

Syntax Error: SyntaxError

(4:3) @apply cannot be used with .bg-button because .bg-button either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that .bg-button exists, make sure that any @import statements are being properly processed before Tailwind CSS sees your CSS, as @apply can only be used for classes in the same CSS tree.

2 | @tailwind components;
3 | .button {

4 | @apply bg-button text-white no-underline rounded-lg text-sm py-2 px-5;
| ^
5 | box-shadow: 0 2px 7px 0 #b0eaff;
6 | }

@ ./resources/sass/app.scss 2:14-196

 Asset     Size   Chunks             Chunk Names

/js/app.js 1.4 MiB /js/app [emitted] /js/app

ERROR in ./resources/sass/app.scss
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError

(4:3) @apply cannot be used with .bg-button because .bg-button either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that .bg-button exists, make sure that any @import statements are being properly processed before Tailwind CSS sees your CSS, as @apply can only be used for classes in the same CSS tree.

2 | @tailwind components;
3 | .button {

4 | @apply bg-button text-white no-underline rounded-lg text-sm py-2 px-5;
| ^
5 | box-shadow: 0 2px 7px 0 #b0eaff;
6 | }

at C:\laragon\www\birdboard\node_modules\webpack\lib\NormalModule.js:316:20
at C:\laragon\www\birdboard\node_modules\loader-runner\lib\LoaderRunner.js:367:11
at C:\laragon\www\birdboard\node_modules\loader-runner\lib\LoaderRunner.js:233:18
at context.callback (C:\laragon\www\birdboard\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at C:\laragon\www\birdboard\node_modules\postcss-loader\src\index.js:207:9

@ ./resources/sass/app.scss

ERROR in ./resources/sass/app.scss (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./node_modules/sass-loader/dist/cjs.js??ref--5-4!./resources/sass/app.scss)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError

(4:3) @apply cannot be used with .bg-button because .bg-button either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that .bg-button exists, make sure that any @import statements are being properly processed before Tailwind CSS sees your CSS, as @apply can only be used for classes in the same CSS tree.

2 | @tailwind components;
3 | .button {

4 | @apply bg-button text-white no-underline rounded-lg text-sm py-2 px-5;
| ^
5 | box-shadow: 0 2px 7px 0 #b0eaff;
6 | }

@ ./resources/sass/app.scss 2:14-196
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ development: cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ development 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! C:\Users\Kallal Das\AppData\Roaming\npm-cache_logs\2020-05-27T16_19_16_967Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ dev: npm run development
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ dev 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! C:\Users\Kallal Das\AppData\Roaming\npm-cache_logs\2020-05-27T16_19_17_137Z-debug.log
My github repo is :
https://github.com/Kallal103/Birdboard/

[estevanmaito]

There is something wrong with your bg-button. Could share it?

@apply cannot be used with .bg-button because .bg-button either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that .bg-button exists, make sure that any @import statements are being properly processed before Tailwind CSS sees your CSS, as @apply can only be used for classes in the same CSS tree.

This error was mentioned here too #1599 (comment)

[Kallal103]

This is my public Github repo :
https://github.com/Kallal103/Birdboard/

[estevanmaito]

You didn't define bg-button anywhere https://github.com/Kallal103/Birdboard/search?q=bg-button&unscoped_q=bg-button

Hence the error cannot be found

[matthewmnewman]

It seems you might have an error with your config file reference your background colours.

backgroundColor rather than backgroundColors

 backgroundColor: {
        page: "var(--page-background-color)",
        card: "var(--card-background-color)",
        button: "var(--button-background-color)"
 }

[estevanmaito]

Yeah, this is the solution 👆

This PR would've given a better message #1799

[Kallal103]

It seems you might have an error with your config file reference your background colours.

backgroundColor rather than backgroundColors

 backgroundColor: {
        page: "var(--page-background-color)",
        card: "var(--card-background-color)",
        button: "var(--button-background-color)"
 }

Thanks, it works like a charm