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?