Infinite Loop Issue with Vite + Tailwind v4 + Shopify Development

[moxiethunder]

Hello everyone! I'm setting up a Shopify development environment using Vite and Tailwind v4 but encountering an infinite build loop issue.

Current Setup

• Using Vite to handle CSS/JS compilation
• Using Shopify CLI (shopify theme dev) to sync with Shopify
• Following Shopify's required folder structure
• Trying both Vite setup and PostCSS setup with Tailwind v4

The Issue

My workflow creates an infinite build loop:

1. Change a file (Liquid/CSS/JS)
2. vite build --watch compiles assets to /assets directory
3. Shopify CLI detects changes in /assets (a watched directory)
4. This triggers Tailwind to update
5. CSS files change, triggering Vite again
6. Return to step 2 → infinite loop

What Works

• Tailwind v3 with JS config works fine
• The issue appears specific to v4 and the CSS config

Suspected Cause

I believe the issue is related to how files are being built and the watch process interaction between Vite, Tailwind v4, and the Shopify CLI.

Has anyone encountered this issue or have suggestions for breaking this loop while maintaining the Vite + Tailwind v4 setup? Happy to provide more details if needed.

[chris-kreidl]

I'm having the same issue, though I don't know how Shopify CLI would be triggering tailwind/vite to rebuild. My setup loops even with Shopify CLI not running.

[chris-kreidl]

@moxiethunder After finally getting a chance to spend some more time on it this afternoon I believe it to be tailwind itself picking up the newly generated output file and triggering a rebuild. I think it's content detection might be getting greedy here. I've excluded Shopify's assets directory and the looping has stopped. This works with both @tailwindcss/vite and @tailwindcss/postcss

My CSS entrypoint (./entrypoints/css/stylesheet.css) now looks like this:

@import 'tailwindcss';

@import 'tippy.js/dist/tippy.css' layer(base);

@import 'tailwindcss-radix-colors/dist/red-colors-only.css';
@import 'tailwindcss-radix-colors/dist/orange-colors-only.css';
@import 'tailwindcss-radix-colors/dist/orangea-colors-only.css';
@import 'tailwindcss-radix-colors/dist/gray-colors-only.css';
@import 'tailwindcss-radix-colors/dist/graya-colors-only.css';

@source not "../../assets";

[moxiethunder]

@chris-kreidl thank you for this response. I'm going to give it a shot later this afternoon. I'll let you know how it works out on my end. Cheers.

[osbre]

I had the same issue with laravel-mix and Jigsaw site. Found the fix for Jigsaw:

@import 'tailwindcss' source(none);

@source "../../**/*.{blade.php,blade.md,md,html,vue}";
@source not "../../**/_tmp/*";

Update: nope, it didn't work. As an actual solution, I had to use the@config solely for the old content: [] directive. See tighten/builtwithjigsaw#191 for more.

[adamatronix]

I needed to add @import 'tailwindcss' source(none);

[adamatronix]

Actually the issue for me was the vite-plugin-shopify generating the snippetFile in the snippet folder. You need to ignore watching that file.

[abhigyan17]

Based on the discussion above, here's a comprehensive solution for the Tailwind v4 infinite loop issue with Vite and Shopify:

Root Cause

The infinite loop occurs because:

1. Vite watches and compiles files to /assets directory
2. Shopify CLI watches the same /assets directory for changes
3. Tailwind v4 CSS configuration scans all source files
4. Changes trigger a cascade: Vite → Tailwind → CSS changes → Vite again

Solution 1: Use source(none) Directive (Recommended)

Update your CSS entrypoint to exclude auto-scanning:

@import 'tailwindcss' source(none);

@source ../../**/*.{liquid,css,js,html};
@source not ../../**/_tmp/*;

This tells Tailwind to ONLY scan the files you explicitly specify, avoiding the auto-detection that causes loops.

Solution 2: Configure Tailwind Content Explicitly

In your tailwind.config.js:

export default {
  content: [
    './snippets/**/*.liquid',
    './sections/**/*.liquid',
    './templates/**/*.liquid',
  ],
  // Disable auto-scanning
  plugins: [],
}

Solution 3: Ignore Build Output in Watch

Configure Vite to ignore the /assets folder:

export default {
  server: {
    watch: {
      ignored: ['**/node_modules/**', '**/dist/**', '**/assets/**'],
    },
  },
}

Solution 4: Configure Shopify Plugin

If using vite-plugin-shopify, ensure it's not watching the same directories that Tailwind processes:

vitePluginShopify({
  // Your config
  themePath: './theme',
})

Most effective: Combine Solution 1 (explicit content scanning) with Solution 3 (ignore watch patterns).

The key is ensuring Tailwind scans only source files, not build output.

[ayonpaul8906]

The infinite loop occurs because Tailwind v4's automatic source detection is picking up your generated output files in the /assets folder. This triggers a new build every time a file is saved, creating a loop.

To fix this, you need to explicitly tell Tailwind not to scan your production/assets directory. You can do this directly in your CSS entry point using the @source directive:

Solution 1: Exclude the Assets Folder

@import "tailwindcss";

/* Exclude the assets directory from being scanned for classes */
@source not "../../assets";

Solution 2: Disable Auto-Scanning (More Precise)

If you want full control to prevent any future "greedy" detection, disable automatic scanning and define your source paths manually:

@import "tailwindcss" source(none);

/* Manually define only the folders with your source code */
@source "../../**/*.{liquid,js,json}";