Mix: postCss not working as intended

Hi everyone, I'm having rather a strange issue where the mix build is working fine but the app.js does not seem to be including the compiled css. However, replacing mix.postCss to mix.css made the app.js includ e the css (but of course not processing the tailwind directives)

webpack.mix.js


mix.postCss('resources/css/main.css', 'public/css', [
    require('tailwindcss')('tailwind.config.js')
])

resources/js/app.js

require('./bootstrap');
import store from './store/index';
import '../css/main.css';

const Vue = require('vue');

const app = new Vue({
    el: '#app',
    store
});

resources/css/main.css

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind screens;

etc...

limb24

6 years ago

Level 1

I seem to have fixed it by using this:

mix.js('resources/js/app.js', 'public/js').css('resources/css/main.css', 'public/css').options({
    processCssUrls: false,
    postCss: [require('tailwindcss')]
})

I'm not so sure on why this works and my other approach didn't, as they should be about the same?

Please or to participate in this conversation.