Laravel Mix 6.0.25 not building with @tailwindcss/jit

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: {
    }
}