Issues following compilation with npm run prod

Question

Issues following compilation with npm run prod

I am currently working on a small website using Laravel and Tailwind CSS on shared hosting. While I am able to use a command line tool on the host, I have encountered an issue. In my local environment, Tailwind works perfectly fine. However, after running 'npm run prod,' many of the Tailwind functionalities are missing and errors appear in the app.css and app.js files.

For example, the scaling effect on hover -

transform hover:scale-105 duration-200

does not work on the host server.

I attempted to import Tailwind with a CDN as a temporary fix, but I know this is not a sustainable solution.

I have been searching for an answer for several days without any success. What could be causing this issue? Any help would be greatly appreciated.

css npm tailwind-css

Answer 1

Answer №1

When working locally, you typically use npm run dev and for production, you use npm run prod. By default, Tailwind's development version does not remove unused styles. However, when running npm run prod, unused styles are purged for production usage.

According to the documentation, you need to configure the paths to your templates in the purge section of your tailwind.config.js.

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

For more information, check out the docs.

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

If you fail to configure these paths, Tailwind won't know which classes you're using and will end up purging all styles it doesn't recognize, such as hover:scale-105.

Solution "dirty":
You can temporarily fix the issue by running npm run dev even in production, although this results in a bulky CSS build.

Solution "clean":
To permanently resolve the problem, ensure you correctly configure your paths so Tailwind can effectively recognize and purge unused styles.

You can also test this in your development environment by running npm run prod to observe the outcome.

Answer 2

When working locally, you typically use npm run dev and for production, you use npm run prod. By default, Tailwind's development version does not remove unused styles. However, when running npm run prod, unused styles are purged for production usage.

According to the documentation, you need to configure the paths to your templates in the purge section of your tailwind.config.js.

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

For more information, check out the docs.

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

If you fail to configure these paths, Tailwind won't know which classes you're using and will end up purging all styles it doesn't recognize, such as hover:scale-105.

Solution "dirty":
You can temporarily fix the issue by running npm run dev even in production, although this results in a bulky CSS build.

Solution "clean":
To permanently resolve the problem, ensure you correctly configure your paths so Tailwind can effectively recognize and purge unused styles.

You can also test this in your development environment by running npm run prod to observe the outcome.

Answer 3

Answer №2

Even after running npm run production, the app.css file still contains some warnings. Strangely, when I upload it to the host, those warnings turn into errors. Check out this screenshot for reference:

https://i.sstatic.net/E9TgY.png

Interestingly, everything works smoothly when I use the file after running npm run dev. It's possible that there are clashes between Tailwind classes causing these issues. I will investigate further and provide a solution soon.

Answer 4

Even after running npm run production, the app.css file still contains some warnings. Strangely, when I upload it to the host, those warnings turn into errors. Check out this screenshot for reference:

https://i.sstatic.net/E9TgY.png

Interestingly, everything works smoothly when I use the file after running npm run dev. It's possible that there are clashes between Tailwind classes causing these issues. I will investigate further and provide a solution soon.

Issues following compilation with npm run prod

Answer №1

Answer №2

Similar questions

Implementing CSS styles based on the count of elements

Smartphone screen cluttered with overlapping paragraphs

Encountering the "ERR_MODULE_NOT_FOUND" error when running "yo code" in VSCode is causing some frustration

Using Laravel Mix alongside node-notifier led to a SyntaxError where an unexpected token 'export' was encountered

Storing github releases on internal network for enhanced security

Struggling with smoothly transitioning an image into view using CSS and JavaScript

Tips for resizing the dimensions of two div elements to fit the screen dimensions

What is the solution to this issue? How can I break the grid row in Bootstrap 4? Which specific Bootstrap classes should I apply for this task?

Troublesome alignment with bootstrap grid system

Troubleshooting problem with presenting real-time data in a Bootstrap Carousel using PHP

Having trouble with running npm install after updating node js?

As you scroll, a box blocks off half of the screen

Trouble with Divs and Element Placement

having trouble with starting the React script

EBUSY: Unable to access resource due to being busy or locked, unable to retrieve information from 'C:hiberfil.sys'

Exploring jQuery Animation Effects: Enhancing Your Web Experience with Zoom In and Zoom Out

implement an angular directive to apply a CSS element

Installing packages globally and locally with npm leads to the installation of varying components

Overlay one image onto another using Jimp

Grammarly is seamlessly inserting padding into my body element