Laravel Mix 6.0.25 not building with #tailwindcss/jit - laravel

Question

I'm trying to replace the Tailwindcss compiler with #tailwindcss/jit in a Laravel project that is using Vue Laravel Mix but I'm getting this Unknown word error.
✖ Mix Compiled with some errors in 489.07ms
ERROR in ./resources/sass/app.scss 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) /Users/username-76/Desktop/projectname/resources/sass/app.scss
Unknown word
1 | import api from "!../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
| ^ 2 | import content from "!!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].oneOf[1].use[1]!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].oneOf[1].use[2]!../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].oneOf[1].use[3]!./app.scss";
3 |
at processResult (/Users/username-76/Desktop/projectname/node_modules/webpack/lib/NormalModule.js:701:19)
at /Users/username-76/Desktop/projectname/node_modules/webpack/lib/NormalModule.js:807:5
at /Users/username-76/Desktop/projectname/node_modules/loader-runner/lib/LoaderRunner.js:399:11
at /Users/username-76/Desktop/projectname/node_modules/loader-runner/lib/LoaderRunner.js:251:18
at context.callback (/Users/username-76/Desktop/projectname/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
at Object.loader (/Users/username-76/Desktop/projectname/node_modules/postcss-loader/dist/index.js:140:7)
1 ERROR in child compilations (Use 'stats.children: true' resp.
'--stats-children' for more details) webpack compiled with 2 errors
app.scss
/* purgecss start ignore */
#tailwind base;
#tailwind components;
/* purgecss end ignore */
#tailwind utilities;
html, body {
#apply font-sans;
#apply text-darkblue;
}
webpack.mix.js
const mix = require('laravel-mix');
mix.disableSuccessNotifications();
mix.js('resources/js/app.js', 'public/js').vue();
mix.postCss("resources/sass/app.scss", "public/css", [
require("#tailwindcss/jit"),
]);
mix.version();

Answer 1

You're using the PostCSS plugin, yet you are attempting to compile SASS. Do it the following way instead.
.postCss('resources/css/app.css', 'public/css', [
require('tailwindcss')
])
.options({
postCss: [ tailwindcss('./tailwind.config.js') ],
})
Your app.css would include Tailwind:
#import 'tailwindcss/base';
#import 'tailwindcss/components';
#import 'tailwindcss/utilities';
And then in your tailwind.config.js would include the just-in-time mode.
module.exports = {
mode: 'jit',
/* These paths are just examples, customize
them to match your project structure
*/
purge: [
'./storage/framework/views/*.php',
'./resources/**/*.blade.php',
'./resources/**/*.js',
'./resources/**/*.vue',
],
theme: {
}
}