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
5

Hi @laravelDev

I’ve just moved to Sage11 from sage10 for developing custom theme for my WordPress website. I’m using WooCommerce and trying to customize the product template. For that I’m adding single-product.blade.php and singple-product-content.blade.php files inside the theme directory: /mytheme/views/woocommerce. Unluckily it’s not overriding the the default structure of WooCommerce product template.

Do I need to do any additional steps to make this work or to setup WooCommerce in sage 11 environment?

Any advice will be much appreciated!
Thanks.

6

This should probably move to a new topic as this one is already solved, but I’ve had success using this package which updates the template paths.

1 Like