Sage 11 + Vite + WooCommerce - hot reload and Tailwind compiling not working

sage
, ,
1

Hey guys,

I’m trying to customize a WooCommerce template (cart.php) with Tailwind classes. I copied the source template from the plugin’s folder into mysagetheme/woocommerce/cart/cart.php But:

  • hot reloading is not working, despite the fact that it works when editing .blade files
  • the Tailwind compiler seems oblivious to the fact that I’m adding Tailwind CSS classes to the code of the cart.php WooCommerce file.

How could I make aware both Vite (for hot reloading), and the Tailwind compiler (for CSS code compilation) of the fact that I am customizing WooCommerce template .php files?

Any suggestions would be greatly appreciated.

Many thanks.

2

Update: I fixed hot reloading for .php files by replacing refresh: true in vite.config.js with

refresh: [
  'resources/views/**/*.blade.php',
  'resources/**/*.js',
  'resources/**/*.vue',
  './**/*.php', // Watch .php files for changes
],

If only I could make the Tailwind compiler be aware of changes inside my .php file, that would be perfect.

Any thoughts?

3

You can specify your source files for tailwind. Here is where it’s happening in sage: sage/resources/css/app.css at 5948da928de83da43da9ea630957f9946210db8c · roots/sage · GitHub

Relevant docs: https://tailwindcss.com/docs/detecting-classes-in-source-files

2 Likes
4

@csorrentino you saved my day (and lightning fast!) :superhero:

It all makes sense as to why my attempts to use tailwind.config.js to specify the sources could never have worked. My old Tailwind 3.x habits die hard :grin:

But yeah, I’m loving Tailwind 4.x more and more. Today I learned something new. And for that I am grateful to you, Sir.

Chapeau.

1 Like