Tailwind purge not working correctly.

I have the following config for tailwind.config.js

module.exports = {
  mode:'jit',
  purge: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue',

  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {}
  },
  variants: {
    extend: {
      tableLayout: ['hover', 'focus'],
    },
  },
  plugins: [
    require('@tailwindcss/aspect-ratio'),
  ],
}

My webpack.mix.js looks like this

const mix = require('laravel-mix');





mix.js('resources/js/stripepayment.js', 'public/js')
.js('resources/js/masterlayout.js', 'public/js')
.postCss("resources/css/menufooter.css","public/css")
 .postCss("resources/css/style.css", "public/css", [
  require("tailwindcss"),
 ])
.postCss("resources/css/body.css", "public/css", [
  require("tailwindcss"),
 ]);

 
 const path = require('path'); mix.alias({ ziggy: path.resolve('vendor/tightenco/ziggy/dist.vue') });


mix.js('resources/js/app.js','public/js').vue().version();
 
 



 mix.webpackConfig({
  output: {
    chunkFilename: 'js/[name].js?id=[chunkhash]',
  }
});

  // .sass('resources/sass/app.scss', 'public/css');

I am having issues with npm run prod for laravel mix. The purging is not working correctly and the stylings are disturbed. I tried on dev mode and it works fine.

The purging is working great for .vue files in production but not for .blade.php files.

Can anyone help me please to know what I am doing wrong?

lbecket

4 years ago

Level 39

I was just fighting this same battle where my styles were getting messed-up in prod and, strangely enough, using your purge configuration caused everything to work. However, my webpack.mix.js configuration is a little different.


let mix = require('laravel-mix');

const tailwindcss = require('tailwindcss');
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');

mix.js('resources/js/scripts/app.js', 'public/js/app.js')
	.sass('resources/sass/app.scss', 'public/css')
    .webpackConfig({
	    plugins: [
	        new VuetifyLoaderPlugin()
	    ]
	})
	.options({
		processCssUrls: false,
		postCss: [ tailwindcss('tailwind.config.js') ],
	}).version()
;

Perhaps the answer lies here.

Please or to participate in this conversation.