css - Errors after npm run prod

Question

I'm developing a small website with Laravel and Tailwind on shared hosting. I can use a command line tool on host. In the local environment tailwind works without problem but after npm run prod most of the Tailwind functionalities are missing and the app.css and app.js seem to have errors.

e.g. scaling on hover -> transform hover:scale-105 duration-200 doesn't work on host.

I tried importing Tailwind with cdn but it can't be a permanent solution.

What am I doing wrong?? I looking for an answer for days with no luck

question from:https://stackoverflow.com/questions/65835876/errors-after-npm-run-prod

Answer 1

I assume locally you run npm run dev and on production npm run prod. By default the development version of Tailwind does not remove unused style specification. But when with npm run prod unused styles are purged for production usage.

As you can read in the docs the the paths to your templates should be configured in the purge section of your tailwind.config.js.

module.exports = {
  purge: [
    './src/**/*.html',
    './src/**/*.vue',
    './src/**/*.jsx',
  ],
  // .. more ..

See docs:

This list should include any files in your project that reference any of your styles by name

If you don't configure these paths, Tailwind does not know which classes you use and will therefore purge all styles it does not find, f. ex. your hover:scale-105.

Solution "dirty":.
You run npm run dev in production which will result in a large build of your css, but fixes the problem for now.

Solution "clean":.
You configure your paths correctly, let Tailwind correctly recognize it and purge unused styles... and be happy.

You can test this also in your development environment by running npm run prod and see what happens.