Tailwind with vite.js unwanted page reload

Viewed 617

I am trying to setup Vite JS for my development of my Wordpress Theme. For this theme I want to use Tailwind 3.

The problem I have is that the page is reloaded (Browser refresh) when I change html-classes in my php-files for tailwind to compile.

For example: If I change the classes in my header.php

<h1 class="text-4xl font-bold underline">Testar</h1>

The browser will reload the page. I want HMR. The console output is this:

8:32:22 AM [vite] page reload header.php (x6)

My style changes in my app.scss is working with HMR. It instantly updates the page with the new compiled style. I know that this line in tailwind.config.js, is the one that gives me the unwanted page reload:

"./*.php",

But I don't know how to fix it.


These are my files:

tailwind.config.js

module.exports = {
  content: [
    "./*.php",
    //"./src/**/*.{vue,js,ts,jsx,tsx}",
    ],
  theme: {
    extend: {},
  },
  plugins: [],
}

vite.config.js

// vite.config.js
export default ({ command }) => ({
    base: command === 'serve' ? '' : '/build/',
    publicDir: 'fake_dir_so_nothing_gets_copied',
    build: {
        manifest: true,
        outDir: 'public/build',
        rollupOptions: {
            input: 'resources/js/app.js',
        },
    },
});

app.js

import '../scss/app.scss';
import '../scss/tailwind.scss';
import './modules/test.js';

tailwind.scss

@tailwind base;
@tailwind components;
@tailwind utilities;

In the footer i have this to get HMR

<?php if (IS_PRODUCTION) : ?>
<!-- .... -->
<?php else: ?>
    <script type="module" src="http://localhost:3000/@vite/client"></script>
    <script type="module" src="http://localhost:3000/resources/js/app.js"></script>
<?php endif ?>

Do you have any idea of how I can solve this? How I can get to the point where I directly see the tailwind style updates on my page without browser reload?

0 Answers
Related