Tailwind CSS styles not updating during Hot Module Reloading

Hi All,

First of all, awesome package!

I seem to be having an issue where the Tailwind CSS styles I am applying to HTML elements are not updating during hot module reloading. I believe I have all the requirements, however I am stuck on figuring out what may be missing.

In my /frontend/entrypoints directory i have the following inside main.css:

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

I've updated my dev command to the following:

{
    "version": "0.0.0",
    "private": true,
    "type": "module",
    "scripts": {
      "dev": "run-p -sr \"shopify:dev -- {@}\" \"vite:dev\" --", 
      "deploy": "run-s \"build\" \"shopify:push -- {@}\" --", 
      "shopify:dev": "shopify theme dev --live-reload full-page", 
      "vite:dev": "vite", 
      "shopify:push": "shopify theme push", 
      "build": "vite build"
    },
    "devDependencies": {
      "npm-run-all": "^4.1.5", 
      "vite": "^4.2.1",
      "vite-plugin-shopify": "^2.0.2"
    }
  }

vite.config.js:

import { defineConfig } from 'vite'
import shopify from 'vite-plugin-shopify'

export default defineConfig({
  plugins: [
    shopify()
  ],
  build: {
    emptyOutDir: false
  }
})

Attached is a quick loom recording: https://www.loom.com/share/aac1c4ea848646e3a5e4f88f63cb9b21?sid=fb82e0b3-895f-45cd-8a29-c48129b2cc50

Appreciate any help!

barrel / shopify-vite

Tailwind CSS styles not updating during Hot Module Reloading #109