Tailwind & Vite Hot Reload Not working on the first hot reload

[iska31]

Hello,

I'm using tailwind on my boilerplate with "vite-plugin-shopify": "^2.2.1"

To reproduce :

• I write a plein text in a liquid file,
• I write a tailwind class that do not exist in my entire code yet (so not generated in the main tailwind css file yet),
• I save in my IDE, launching the reload.

As a result :

• My tw class doesn't "appear" on the screen,
• My plain text is successfully loaded,

I re-hit the save key on my IDE => My tw class get loaded.

Edge cases

• When I remove the tw class, the first load will correctly remove it,
• When I re-add this same tw class, the first load will correctly add it,

Thus, the issue seems to appear when tailwind first init its class.

vite.config.ts

import { defineConfig } from 'vite';
import checker from 'vite-plugin-checker';
import shopify from 'vite-plugin-shopify';
import pageReload from 'vite-plugin-page-reload';
import postcss from './postcss.config';

// https://vitejs.dev/config/
export default defineConfig({
  css: {
    postcss
  },
  plugins: [
    checker({
      typescript: true
    }),
    shopify({
      // Root path to your Shopify theme directory (location of snippets, sections, templates, etc.)
      themeRoot: './',
      // Front-end source code directory
      sourceCodeDir: 'src',
      // Front-end entry points directory
      entrypointsDir: 'src/entrypoints',
      // Additional files to use as entry points (accepts an array of file paths or glob patterns)
      additionalEntrypoints: [],
      // Specifies the file name of the snippet that loads your assets
      snippetFile: 'vite-tag.liquid'
    }),
    pageReload(
      [
        './assets/**/*',
        './config/**/*',
        './layout/**/*',
        './locales/**/*',
        './public/**/*',
        './sections/**/*',
        './snippets/**/*',
        './templates/**/*'
      ],
      { delay: 3000 }
    )
  ],
  publicDir: 'public',
  build: {
    emptyOutDir: true,
    outDir: './assets',
    assetsDir: './'
  }
});

postcss.config.ts

import postcssImport from 'postcss-import';
import tailwindcssNesting from 'tailwindcss/nesting/index.js';
import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';
import tailwindConfig from './tailwind.config';

const config = {
  plugins: [
    postcssImport(),
    tailwindcssNesting,
    tailwindcss(tailwindConfig),
    autoprefixer
  ]
};

export default config;

Ideally, when saving a liquid file I would need to "wait" until the tailwind css file finish to load on the local vite server.

I was hopping vite-plugin-page-reload to solve the issue with the newly added debounce function, but I might have misunderstood the goal of this package.

[montalvomiguelo]

The Shopify CLI hot reloads changes to sections and css files during dev. You would want to change that behavior to full-page --live-reload full-page so that your Tailwind styles apply correctly. https://shopify.dev/docs/themes/tools/cli/commands#dev

Thanks a lot for the details 🙏

https://github.com/barrel/shopify-vite/assets/5134470/0cfd3522-8556-473b-91f3-fe7e792bda28

[iska31]

Okay all good thank you. It works only by adding the Shopify cli flags.

Could you explain me the use-cases for the usages of your module vite-plugin-page-reload please ?

[montalvomiguelo]

It can be used to reload the page where the Shopify CLI cannot, e.g. within the theme editor or the .myshopify.com domain.