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.