Laravel vue and tailwindui compile prod fails

When i run 'npm run dev' or 'npm run watch' everything works as supposed to. But when i run 'npm run prod', my site get's all messed up. It actually not fails to compile, but some vue components act weird en some styling is messed up. My guess is that it has something to do with either vue components or the tailwindui i installed recently.

Maybe the problem could be solved easily but i dont know much about this tailwind.config, webpack.mix and package.json.

Does anyone has a suggestion? Anything that puts me in the right direction would help.

TAILWIND.CONFIG

module.exports = {
  purge: [
    './resources/views/**/*.blade.php',
    './resources/css/**/*.css',
  ],
  theme: {
    extend: {}
  },
  variants: {},
  plugins: [
    require('@tailwindcss/ui'),
  ]
}

PACKAGE.JSON

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "@tailwindcss/custom-forms": "^0.2",
        "axios": "^0.19",
        "browser-sync": "^2.26.7",
        "browser-sync-webpack-plugin": "^2.0.1",
        "cross-env": "^7.0",
        "laravel-mix": "^5.0.1",
        "laravel-mix-tailwind": "^0.1.0",
        "lodash": "^4.17.13",
        "resolve-url-loader": "^2.3.1",
        "tailwindcss": "^1.4",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    },
    "dependencies": {
        "@tailwindcss/ui": "^0.3.1",
        "tailwindcss": "^1.4.6"
    }
}

WEBPACK.MIX

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

require('laravel-mix-tailwind');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
   .postCss('resources/css/app.css', 'public/css')
   .tailwind('./tailwind.config.js')
   .browserSync('cityscanr.test');

if (mix.inProduction()) {
  mix
   .version();
}

drehimself

5 years ago

Level 35

Hmm, it might be a purgecss config issue. It looks like purge is removing most of your styles.

Here's a more general purgecss config I have for a Laravel app that works well. Maybe try this?

purge: [
  './app/**/*.php',
  './resources/**/*.php',
],

looksauakusi

4 years ago

Level 1

@drehimself I encounter a similar problem. I have a laravel , vue application. When I npm run prod, I got several chunk js files. Is it known as code splitting? How can I disable code splitting? The file names are missing and the application does not run on the browser. When I npm run dev, it works fine. Could you please advise ? Many thanks

Sinnbeck

4 years ago

Level 102

@looksauakusi if the answers in this thread does not fix your problem, it most likely isn't the same problem. Please make a new thread with the problem and your code

Troj

5 years ago

Level 4

Hey @drehimself thanks but i still got the same result, any other suggestions?

It looks like the classes inside my vue components are not compiled into the css file. For example my hamburger menu is visible on larger screens. This is inside a vue component and starts with the class lg:hidden

I added this line and that seems to do the job. Is there a better way to to this?

'./resources/js/components/**/*.vue',

module.exports = {
  purge: [
    // './resources/views/**/*.blade.php',
    // './resources/css/**/*.css',
  './app/**/*.php',
  './resources/**/*.php',
  './resources/js/components/**/*.vue',
  ],
  theme: {
    extend: {}
  },
  variants: {},
  plugins: [
    require('@tailwindcss/ui'),
  ]
}

1 like

drehimself

5 years ago

Best Answer

Level 35

@troj That should do it! I forgot to add the *.vue files in my reply. You can make it a bit more general if you want, but what you have is fine if you put all your vue components in that folder.

2 likes

Please or to participate in this conversation.