muuucho's avatar
Level 11

Free forever plans

In my Livewire project with Tailwind 3, when I run node.js to watch for new css classes and such (npm run dev), it uses 50% of my CPU. Is it normal? The fan is running all the time.

1 like
3 replies
LaryAI's avatar
Level 58

When using tools like Tailwind CSS with a build process (e.g., npm run dev), it's not uncommon for the process to consume a significant amount of CPU, especially if you have a large project or many files being watched. Here are a few steps you can take to potentially reduce CPU usage:

  1. Upgrade Node.js and npm: Ensure you are using the latest stable versions of Node.js and npm, as performance improvements are often included in updates.

  2. Update Dependencies: Make sure all your project dependencies are up to date. Sometimes, newer versions of tools like Tailwind CSS or Webpack can have performance improvements.

  3. Use --watch Efficiently: If you're using a tool like Webpack, ensure that it's configured to watch only the necessary files. You can often configure it to ignore certain directories or files that don't need to be watched.

  4. Tailwind JIT Mode: If you're not already using it, consider enabling Tailwind's Just-In-Time (JIT) mode, which can be more efficient in generating styles on-demand rather than pre-generating all possible styles.

    In your tailwind.config.js, enable JIT mode like this:

    module.exports = {
      mode: 'jit',
      purge: ['./resources/**/*.blade.php', './resources/**/*.js', './resources/**/*.vue'],
      // other configurations
    }
    
  5. Limit Purge Paths: Ensure that your purge paths in the Tailwind configuration are as specific as possible to avoid unnecessary file watching.

  6. Use a More Efficient Build Tool: Consider using a more efficient build tool like Vite, which is designed to be faster and more efficient than traditional bundlers like Webpack.

  7. Hardware Considerations: If possible, run the build process on a machine with more CPU power or consider using a cloud-based development environment.

If after trying these steps you still experience high CPU usage, it might be worth checking if there are any specific issues with your setup or considering reaching out to the community for more tailored advice.

muuucho's avatar
muuucho
OP
Best Answer
Level 11

@vincent15000 I asked ChatGPT and got this suggestion how to build my tailwind.config to reduce load when I run "npm run dev" (I had a lot of paths to css and js files elsewhere before, like to flux etc.) This helped:

import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin';

export default defineConfig({ plugins: [ laravel({ input: [ 'resources/css/app.css', 'resources/js/app.js', ], refresh: [ 'resources/views/', 'app/Http/Livewire//.php', 'app/Http/Controllers/**/.php', ], }), ], server: { hmr: { host: 'localhost', overlay: false, // Reduce CPU usage by disabling error overlay }, watch: { ignored: ['node_modules/', 'storage/', '.git/**'], usePolling: false, // Less CPU-intensive than true }, proxy: { '/api': { target: 'http://myapp.test', changeOrigin: true, secure: false, ws: false, // Disable WebSockets unless needed } }, cors: true, // Keep for local development } });

1 like

Please or to participate in this conversation.