warpig's avatar
Level 12

@apply Tailwind

Has anyone used this before? I have these classes but when I run npm run dev I get a bunch of error messages, and mostly they're all about "syntax", documentation only says to add the @apply before inserting Tailwind classes, im wondering if there's a "special way" in Laravel or what maybe you shouldn't use npm run dev? These classes all used to work before this but let me know please!

https://tailwindcss.com/docs/functions-and-directives#apply

.entries-tab-first {
    @apply rounded-tl-md h-12 w-full hover:bg-gray-900 hover:bg-opacity-5 transition ease-in-out bg-blue-300;
}
.entries-tab-regular {
    @apply h-12 w-full hover:bg-gray-900 hover:bg-opacity-5 transition ease-in-out bg-blue-300;
}
.entries-tab-last {
    rounded-tr-md h-12 w-full hover:bg-gray-900 hover:bg-opacity-5 transition ease-in-out bg-blue-300;
}
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

(13:19) /Users/eduardocoello/Projects/tweety/resources/css/app.css Unknown word

  11 | }
  12 | .entries-tab-last {
> 13 |     rounded-tr-md h-12 w-full hover:bg-gray-900 hover:bg-opacity-5 transition ease-in-out bg-blue-300;
     |                   ^
  14 | }

    at processResult (/Users/eduardocoello/Projects/tweety/node_modules/webpack/lib/NormalModule.js:598:19)
    at /Users/eduardocoello/Projects/tweety/node_modules/webpack/lib/NormalModule.js:692:5
    at /Users/eduardocoello/Projects/tweety/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /Users/eduardocoello/Projects/tweety/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/Users/eduardocoello/Projects/tweety/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/Users/eduardocoello/Projects/tweety/node_modules/postcss-loader/dist/index.js:102:7)

1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 2 errors
npm ERR! code 1
npm ERR! path /Users/eduardocoello/Projects/tweety
npm ERR! command failed
npm ERR! command sh -c webpack --progress '--config=node_modules/laravel-mix/setup/webpack.config.js'

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/eduardocoello/.npm/_logs/2021-03-12T22_47_44_127Z-debug.log
npm ERR! code 1
npm ERR! path /Users/eduardocoello/Projects/tweety
npm ERR! command failed
npm ERR! command sh -c mix

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/eduardocoello/.npm/_logs/2021-03-12T22_47_44_174Z-debug.log
npm ERR! code 1
npm ERR! path /Users/eduardocoello/Projects/tweety
npm ERR! command failed
npm ERR! command sh -c npm run development

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/eduardocoello/.npm/_logs/2021-03-12T22_47_44_237Z-debug.log
0 likes
1 reply
warpig's avatar
warpig
OP
Best Answer
Level 12

Nevermind, I forgot to add @apply to the last set of classes. However the classes aren't applied even though the mix build was succesful.

Please or to participate in this conversation.