shopify-accelerate-app 1.0.62 → 1.1.1

package/.claude/settings.local.json

@@ -0,0 +1,12 @@
+{
+  "permissions": {
+    "allow": [
+      "mcp__claude_ai_Context7__resolve-library-id",
+      "WebSearch",
+      "WebFetch(domain:kitemetric.com)",
+      "WebFetch(domain:www.jetbrains.com)",
+      "WebFetch(domain:github.com)",
+      "Bash(cd:*)"
+    ]
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shopify-accelerate-app",
-  "version": "1.0.62",
+  "version": "1.1.1",
   "description": "Shopify App development with full Typescript Support",
   "author": "Felix Tellmann",
   "license": "MIT",
@@ -34,9 +34,7 @@
   "dependencies": {
     "@swc/core": "^1.9.3",
     "@swc/helpers": "^0.5.15",
-    "@tailwindcss/aspect-ratio": "^0.4.2",
-    "@tailwindcss/container-queries": "^0.1.1",
-    "autoprefixer": "^10.4.20",
+    "@tailwindcss/cli": "^4.0.0",
     "chalk": "4.1.2",
     "commander": "^12.1.0",
     "dotenv-mono": "^1.3.14",
@@ -50,18 +48,16 @@
     "json2toml": "^6.1.1",
     "node-watch": "^0.7.4",
     "postcss": "^8.4.49",
-    "postcss-import": "^16.1.0",
     "preact": "^10.25.0",
     "prompts": "^2.4.2",
     "regenerator-runtime": "^0.14.1",
     "shopify-typed-node-api": "^2.1.1",
-    "tailwindcss": "0.0.0-insiders.6069a81",
-    "tailwindcss-container-queries-with-max-width": "^0.1.5",
+    "tailwindcss": "^4.0.0",
     "toml": "^3.0.0",
     "ts-node": "^10.9.2",
     "tsconfig-paths": "^4.2.0",
     "zustand": "^5.0.1",
-    "tailwindcss-animate": "^1.0.7"
+    "tw-animate-css": "^1.0.0"
   },
   "devDependencies": {
     "@types/inquirer": "^9.0.7",

package/src/esbuild/esbuild.ts

@@ -28,6 +28,9 @@ export const transformClassNameStrings = (stringContent, final = false, cssOutpu
   }
   const classNameString = special ? stringContent.split(" ") : stringContent.replace(/\s+/gi, " ").split(" ");
 
+  // v4 prefix uses colon separator (tw:flex) instead of dash (tw-flex)
+  const prefix_sep = `${prefix}:`;
+
   const prefixedClassNames = classNameString.map((className) => {
     if (!className.trim()) return className;
 
@@ -44,17 +47,17 @@ export const transformClassNameStrings = (stringContent, final = false, cssOutpu
           }
           if (
             final &&
-            (str.startsWith(`${prefix}-`) || str.startsWith(`!${prefix}-`)) &&
+            (str.startsWith(prefix_sep) || str.startsWith(`!${prefix_sep}`)) &&
             !cssOutput?.includes(str.replace(/([@()%,/.[\]])/gi, "\\$1"))
           ) {
             notCSSClasses.set(str, str.replace(/([@()%,/.[\]])/gi, "\\$1"));
-            return str.replace(`${prefix}-`, "").replace(`!${prefix}-`, "");
+            return str.replace(prefix_sep, "").replace(`!${prefix_sep}`, "");
           }
-          if (index === arr.length - 1 && !str.startsWith(`${prefix}-`) && !str.startsWith(`!${prefix}-`)) {
+          if (index === arr.length - 1 && !str.startsWith(prefix_sep) && !str.startsWith(`!${prefix_sep}`)) {
             if (/^!/gi.test(str)) {
-              return `!${prefix}-${str.replace(/^!/gi, "")}`;
+              return `!${prefix_sep}${str.replace(/^!/gi, "")}`;
             }
-            return `${prefix}-${str}`;
+            return `${prefix_sep}${str}`;
           }
           return str;
         })
@@ -62,21 +65,21 @@ export const transformClassNameStrings = (stringContent, final = false, cssOutpu
     }
     if (
       final &&
-      (className.startsWith(`${prefix}-`) || className.startsWith(`!${prefix}-`)) &&
+      (className.startsWith(prefix_sep) || className.startsWith(`!${prefix_sep}`)) &&
       !cssOutput?.includes(`${className.replace(/([@()%,/.[\]])/gi, "\\$1")} `) &&
       !cssOutput?.includes(`${className.replace(/([@()%,/.[\]])/gi, "\\$1")}:`)
     ) {
       notCSSClasses.set(className, className.replace(/([@()%,/.[\]])/gi, "\\$1"));
-      return className.replace(`${prefix}-`, "").replace(`!${prefix}-`, "");
+      return className.replace(prefix_sep, "").replace(`!${prefix_sep}`, "");
     }
 
-    if (className.startsWith(`${prefix}-`) || className.startsWith(`!${prefix}-`)) {
+    if (className.startsWith(prefix_sep) || className.startsWith(`!${prefix_sep}`)) {
       return className;
     } else {
       if (/^!/gi.test(className)) {
-        return `!${prefix}-${className.replace(/^!/gi, "")}`;
+        return `!${prefix_sep}${className.replace(/^!/gi, "")}`;
       }
-      return `${prefix}-${className}`;
+      return `${prefix_sep}${className}`;
     }
   });
 

package/src/tailwind/plugins/auto-col-flow.js

@@ -0,0 +1,25 @@
+const plugin = require("tailwindcss/plugin");
+
+module.exports = plugin(({ matchUtilities, theme }) => {
+  matchUtilities(
+    {
+      "auto-col-flow": (value) => {
+        if (value?.includes("/")) {
+          const [cols, gap] = value.split("/");
+          const calculatedGap = /^(\d|\.)*$/gi.test(gap?.trim()) ? `${+gap * 4}px` : gap;
+
+          return {
+            gridAutoFlow: "column",
+            gridAutoColumns: `calc((100% - (${calculatedGap} * (${cols} - 1))) / ${cols})`,
+            columnGap: calculatedGap,
+          };
+        }
+        return {
+          gridAutoFlow: "column",
+          gridAutoColumns: value,
+        };
+      },
+    },
+    { values: theme("width") }
+  );
+});

package/src/tailwind/tailwind-base.css

@@ -0,0 +1,330 @@
+/* ============================================================
+   Tailwind CSS v4 — Base Configuration
+   This file is used as a template. At runtime, tailwind-watch.ts
+   generates the final input CSS by prepending prefix/important
+   options and appending the user's _tailwind.css via @import.
+   ============================================================ */
+
+/* The @import "tailwindcss" line is generated dynamically in tailwind-watch.ts
+   to support conditional prefix() and important() options. */
+
+/* --- Animations (replaces tailwindcss-animate) --- */
+@import "tw-animate-css";
+
+/* --- Theme Overrides --- */
+@theme {
+  /* ---- Spacing (4px base) ---- */
+  --spacing: 4px;
+  --spacing-px: 1px;
+  --spacing-0: 0;
+  --spacing-0_5: 2px;
+  --spacing-1: 4px;
+  --spacing-1_5: 6px;
+  --spacing-2: 8px;
+  --spacing-2_5: 10px;
+  --spacing-3: 12px;
+  --spacing-3_5: 14px;
+  --spacing-4: 16px;
+  --spacing-5: 20px;
+  --spacing-6: 24px;
+  --spacing-7: 28px;
+  --spacing-8: 32px;
+  --spacing-9: 36px;
+  --spacing-10: 40px;
+  --spacing-11: 44px;
+  --spacing-12: 48px;
+  --spacing-14: 56px;
+  --spacing-16: 64px;
+  --spacing-20: 80px;
+  --spacing-24: 96px;
+  --spacing-28: 112px;
+  --spacing-32: 128px;
+  --spacing-36: 144px;
+  --spacing-40: 160px;
+  --spacing-44: 176px;
+  --spacing-48: 192px;
+  --spacing-52: 208px;
+  --spacing-56: 224px;
+  --spacing-60: 240px;
+  --spacing-64: 256px;
+  --spacing-72: 288px;
+  --spacing-80: 320px;
+  --spacing-96: 384px;
+
+  /* ---- Border Radius ---- */
+  --radius-none: 0px;
+  --radius-xs: 2px;
+  --radius-sm: 2px;
+  --radius-DEFAULT: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius-2xl: 16px;
+  --radius-3xl: 24px;
+  --radius-full: 9999px;
+
+  /* ---- Font Size ---- */
+  --font-size-8: 9px;
+  --font-size-8--line-height: 1.55;
+  --font-size-9: 9px;
+  --font-size-9--line-height: 1.5;
+  --font-size-10: 10px;
+  --font-size-10--line-height: 1.5;
+  --font-size-11: 11px;
+  --font-size-11--line-height: 1.5;
+  --font-size-12: 12px;
+  --font-size-12--line-height: 1.5;
+  --font-size-13: 13px;
+  --font-size-13--line-height: 1.5;
+  --font-size-14: 14px;
+  --font-size-14--line-height: 1.5;
+  --font-size-15: 15px;
+  --font-size-15--line-height: 1.5;
+  --font-size-16: 16px;
+  --font-size-16--line-height: 1.5;
+  --font-size-17: 17px;
+  --font-size-17--line-height: 1.5;
+  --font-size-18: 18px;
+  --font-size-18--line-height: 1.45;
+  --font-size-19: 19px;
+  --font-size-19--line-height: 1.45;
+  --font-size-20: 20px;
+  --font-size-20--line-height: 1.45;
+  --font-size-21: 21px;
+  --font-size-21--line-height: 1.45;
+  --font-size-22: 22px;
+  --font-size-22--line-height: 1.4;
+  --font-size-23: 23px;
+  --font-size-23--line-height: 1.4;
+  --font-size-24: 24px;
+  --font-size-24--line-height: 1.4;
+  --font-size-xs: 12px;
+  --font-size-xs--line-height: 16px;
+  --font-size-sm: 14px;
+  --font-size-sm--line-height: 20px;
+  --font-size-base: 16px;
+  --font-size-base--line-height: 24px;
+  --font-size-lg: 18px;
+  --font-size-lg--line-height: 28px;
+  --font-size-xl: 20px;
+  --font-size-xl--line-height: 28px;
+  --font-size-2xl: 24px;
+  --font-size-2xl--line-height: 32px;
+  --font-size-3xl: 30px;
+  --font-size-3xl--line-height: 36px;
+  --font-size-4xl: 36px;
+  --font-size-4xl--line-height: 36px;
+  --font-size-5xl: 48px;
+  --font-size-5xl--line-height: 1;
+  --font-size-6xl: 60px;
+  --font-size-6xl--line-height: 1;
+  --font-size-7xl: 72px;
+  --font-size-7xl--line-height: 1;
+  --font-size-8xl: 96px;
+  --font-size-8xl--line-height: 1;
+  --font-size-9xl: 144px;
+  --font-size-9xl--line-height: 1;
+
+  /* ---- Line Height ---- */
+  --line-height-none: 1;
+  --line-height-tight: 1.25;
+  --line-height-snug: 1.375;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.625;
+  --line-height-loose: 2;
+  --line-height-3: 12px;
+  --line-height-4: 16px;
+  --line-height-5: 20px;
+  --line-height-6: 24px;
+  --line-height-7: 28px;
+  --line-height-8: 32px;
+  --line-height-9: 36px;
+  --line-height-10: 40px;
+
+  /* ---- Columns ---- */
+  --columns-auto: auto;
+  --columns-1: 1;
+  --columns-2: 2;
+  --columns-3: 3;
+  --columns-4: 4;
+  --columns-5: 5;
+  --columns-6: 6;
+  --columns-7: 7;
+  --columns-8: 8;
+  --columns-9: 9;
+  --columns-10: 10;
+  --columns-11: 11;
+  --columns-12: 12;
+  --columns-3xs: 256px;
+  --columns-2xs: 288px;
+  --columns-xs: 320px;
+  --columns-sm: 384px;
+  --columns-md: 448px;
+  --columns-lg: 512px;
+  --columns-xl: 576px;
+  --columns-2xl: 672px;
+  --columns-3xl: 768px;
+  --columns-4xl: 896px;
+  --columns-5xl: 1024px;
+  --columns-6xl: 1152px;
+  --columns-7xl: 1280px;
+  --columns-8xl: 1440px;
+
+  /* ---- Max Width ---- */
+  --max-width-none: none;
+  --max-width-0: 0px;
+  --max-width-xs: 320px;
+  --max-width-sm: 384px;
+  --max-width-md: 448px;
+  --max-width-lg: 512px;
+  --max-width-xl: 576px;
+  --max-width-2xl: 672px;
+  --max-width-3xl: 768px;
+  --max-width-4xl: 896px;
+  --max-width-5xl: 1024px;
+  --max-width-6xl: 1152px;
+  --max-width-7xl: 1280px;
+  --max-width-8xl: 90rem;
+  --max-width-full: 100%;
+  --max-width-min: min-content;
+  --max-width-max: max-content;
+  --max-width-fit: fit-content;
+  --max-width-prose: 65ch;
+
+  /* ---- Screens ---- */
+  --breakpoint-xxs: 373px;
+  --breakpoint-xs: 427px;
+
+  /* ---- Containers ---- */
+  --container-xxs: 373px;
+  --container-xs: 427px;
+
+  /* ---- Box Shadow (custom) ---- */
+  --shadow-invert-sm: 0 -1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-invert: 0 -3px 5px 1px rgb(0 0 0 / 0.03), 0 -2px 4px 2px rgb(0 0 0 / 0.03);
+  --shadow-invert-md: 0 -4px 6px 1px rgb(0 0 0 / 0.07), 0 -2px 4px 2px rgb(0 0 0 / 0.07);
+  --shadow-invert-lg: 0 -10px 15px 3px rgb(0 0 0 / 0.1), 0 -4px 6px 4px rgb(0 0 0 / 0.1);
+  --shadow-invert-xl: 0 -20px 25px 5px rgb(0 0 0 / 0.1), 0 -8px 10px 6px rgb(0 0 0 / 0.1);
+  --shadow-invert-2xl: 0 -25px 50px 12px rgb(0 0 0 / 0.25);
+
+  /* ---- Keyframes ---- */
+  --animate-slide: slide 30s linear infinite;
+  --animate-marquee1: marquee1 30s linear infinite;
+  --animate-marquee2: marquee2 30s linear infinite;
+  --animate-circle: circle 8.1s linear;
+  --animate-dot: dot 8.1s linear;
+  --animate-typewriter: typewriter 0.5s linear infinite;
+  --animate-pulse-bg: pulse-bg 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+
+  /* ---- Colors ---- */
+  /* v4 uses CSS color-mix for opacity — define base colors as rgb() */
+  --color-theme-trigger-bg: rgb(var(--lx-color-trigger-bg));
+  --color-theme-trigger-text: rgb(var(--lx-color-trigger-text));
+  --color-theme-bg: rgb(var(--lx-color-bg));
+  --color-theme-text: rgb(var(--lx-color-text));
+  --color-theme-button-bg: rgb(var(--lx-color-button-bg));
+  --color-theme-button-text: rgb(var(--lx-color-button-text));
+}
+
+@keyframes slide {
+  0%, 100% { transform: translate3d(0, 0, 0); }
+  100% { transform: translate3d(-50%, 0, 0); }
+}
+
+@keyframes marquee1 {
+  0%, 100% { transform: translate3d(0, 0, 0); }
+  100% { transform: translate3d(-100%, 0, 0); }
+}
+
+@keyframes marquee2 {
+  0%, 100% { transform: translate3d(100%, 0, 0); }
+  100% { transform: translate3d(0, 0, 0); }
+}
+
+@keyframes circle {
+  0% { stroke-dashoffset: 90; }
+  100% { stroke-dashoffset: 0; }
+}
+
+@keyframes dot {
+  0%, 95% { fill: transparent; stroke: currentColor; stroke-opacity: 0.1; }
+  100% { fill: currentColor; stroke: transparent; stroke-opacity: 0; }
+}
+
+@keyframes typewriter {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+
+@keyframes pulse-bg {
+  50% { --tw-bg-opacity: 0.5; }
+}
+
+/* --- Custom Variants (replaces addVariant calls) --- */
+@custom-variant svg (& svg);
+@custom-variant hfa (&:hover, &:focus, &:active);
+@custom-variant hfw (&:hover, &:focus-visible, &:focus-within);
+@custom-variant hfwa (&:hover, &:focus-visible, &:focus-within, &:active);
+@custom-variant hfwaa (&:hover, &:focus-visible, &:focus-within, &:active, &.active);
+@custom-variant hfva (&:hover, &:focus, &:focus-visible, &:active);
+@custom-variant ha (&:hover, &:active);
+@custom-variant hf (&:hover, &:focus-visible);
+@custom-variant fa (&:focus, &:active);
+@custom-variant f (&:focus);
+@custom-variant fw (&:focus-within);
+@custom-variant fv (&:focus-visible);
+@custom-variant h (&:hover);
+@custom-variant d (.dark &);
+@custom-variant ac (&.active);
+@custom-variant b (&::before);
+@custom-variant a (&::after);
+@custom-variant not-prose (:not(.prose &)&);
+@custom-variant hfaa (&:hover, &:focus, &:active, &.active);
+@custom-variant hfvaa (&:hover, &:focus, &:focus-visible, &:active, &.active);
+@custom-variant group-hfa (.group:hover &, .group:focus &, .group:active &);
+@custom-variant group-hf (.group:hover &, .group:focus &);
+@custom-variant group-ac (.group.active &);
+@custom-variant group-hfva (.group:hover &, .group:focus-visible &, .group:active &);
+@custom-variant group-hfwa (.group:hover &, .group:focus-visible &, .group:focus-within &, .group:active &);
+@custom-variant group-hfw (.group:hover &, .group:focus-visible &, .group:focus-within &);
+@custom-variant peer-hfwa (.peer:hover ~ &, .peer:focus-visible ~ &, .peer:focus-within ~ &, .peer:active ~ &);
+@custom-variant peer-fw (.peer:focus-within ~ &);
+
+/* --- Dark mode as class-based --- */
+@custom-variant dark (&:where(.dark *));
+
+/* --- Custom Utilities (replaces addUtilities calls) --- */
+@utility shape-geometric-precision {
+  shape-rendering: geometricPrecision;
+}
+
+@utility open-quote {
+  content: open-quote;
+}
+
+@utility close-quote {
+  content: close-quote;
+}
+
+@utility leading-0 {
+  line-height: 0;
+}
+
+@utility animation-pause {
+  animation-play-state: paused;
+}
+
+@utility animation-play {
+  animation-play-state: running;
+}
+
+/* --- Dynamic Utilities --- */
+
+/* top-spacing: top = var(--spacing-top-bar-spacing) + spacing value */
+@utility top-spacing-* {
+  top: calc(var(--spacing-top-bar) + --value(--spacing-*));
+  top: calc(var(--spacing-top-bar) + --value([length]));
+}
+
+/* auto-col-flow loaded via JS plugin for complex logic */
+@plugin "./plugins/auto-col-flow.js";

package/src/tailwind/tailwind-watch.ts

@@ -1,4 +1,3 @@
-// import { require } from "../../require";
 import child_process from "child_process";
 import fs from "fs";
 import path from "path";
@@ -7,36 +6,142 @@ import { writeCompareFile } from "../utils/fs";
 
 const watch = require("node-watch");
 
+/**
+ * Generates the Tailwind v4 input CSS dynamically.
+ * Combines the base config with conditional prefix/important options
+ * and the user's _tailwind.css file.
+ */
+const generateInputCSS = (base_css_path: string, user_css_path: string): string => {
+  const prefix = process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX;
+  const important = process.env.SHOPIFY_ACCELERATE_TAILWIND_IMPORTANT;
+
+  // Build the @import "tailwindcss" line with options
+  // In v4, preflight is disabled by importing individual layers without preflight.css
+  const tailwind_import_options: string[] = [];
+  if (prefix) {
+    tailwind_import_options.push(`prefix(${prefix})`);
+  }
+
+  let tailwind_import: string;
+  if (important || tailwind_import_options.length > 0) {
+    // When disabling preflight or using prefix/important, import layers individually
+    const theme_options = prefix ? ` prefix(${prefix})` : "";
+    const utilities_options_parts: string[] = [];
+    if (prefix) utilities_options_parts.push(`prefix(${prefix})`);
+    if (important) utilities_options_parts.push(`important(${important})`);
+    const utilities_options = utilities_options_parts.length > 0 ? ` ${utilities_options_parts.join(" ")}` : "";
+
+    tailwind_import = [
+      `@layer theme, base, components;`,
+      `@import "tailwindcss/theme.css" layer(theme)${theme_options};`,
+      `/* Preflight intentionally omitted */`,
+      `/* Utilities are NOT in a @layer so they keep normal cascade priority (like v3) and can override other libraries */`,
+      `@import "tailwindcss/utilities.css"${utilities_options};`,
+    ].join("\n");
+  } else {
+    // No prefix or important — still skip preflight
+    tailwind_import = [
+      `@layer theme, base, components;`,
+      `@import "tailwindcss/theme.css" layer(theme);`,
+      `/* Preflight intentionally omitted */`,
+      `/* Utilities are NOT in a @layer so they keep normal cascade priority (like v3) and can override other libraries */`,
+      `@import "tailwindcss/utilities.css";`,
+    ].join("\n");
+  }
+
+  // Source paths for content detection
+  const extension_path = process.env.SHOPIFY_ACCELERATE_EXTENSION_PATH ?? "";
+  const source_directive = extension_path
+    ? `@source "${extension_path}/**/*.{html,liquid,js,json}";`
+    : "";
+
+  // Safelist equivalent via @source inline()
+  const safelist_prefix = prefix ? `${prefix}:` : "";
+  const safelist = `@source inline("${safelist_prefix}inset-0 ${safelist_prefix}pointer-events-none [&>*]:${safelist_prefix}pointer-events-auto");`;
+
+  // Read the base CSS config (theme, variants, utilities, plugins)
+  // Resolve bare package imports to absolute paths so they work from the generated file's location
+  const tw_animate_path = path.join(package_root, "node_modules/tw-animate-css/dist/tw-animate.css").replace(/\\/g, "/");
+  const base_css = fs.readFileSync(base_css_path, { encoding: "utf-8" }).replace(
+    '@import "tw-animate-css"',
+    `@import "${tw_animate_path}"`
+  );
+
+  // Read the user's _tailwind.css
+  const user_css = fs.readFileSync(user_css_path, { encoding: "utf-8" });
+
+  return [
+    `/* Auto-generated Tailwind v4 input — do not edit */`,
+    tailwind_import,
+    ``,
+    base_css,
+    ``,
+    source_directive,
+    safelist,
+    ``,
+    `/* User styles */`,
+    user_css,
+  ].join("\n");
+};
+
+/**
+ * Generates a `tailwind.config.css` at the consuming project root so that
+ * IntelliJ / WebStorm's Tailwind Language Server can discover all custom
+ * theme tokens, variants, and utilities for autocomplete.
+ *
+ * The file is NOT used by the build — it exists solely for IDE support.
+ * Uses `writeCompareFile` to avoid unnecessary file-change events.
+ */
+const generateIDEConfig = (base_css_import_path: string): void => {
+  const ide_config_path = path.join(process.cwd(), "tailwind.config.css");
+
+  const content = [
+    `/* Auto-generated by shopify-accelerate-app for IDE autocomplete.`,
+    `   This file is NOT used by the build — it exists solely so IntelliJ/WebStorm`,
+    `   can provide Tailwind CSS class autocomplete with all custom theme values,`,
+    `   variants, and utilities.`,
+    ``,
+    `   Do not edit — it will be regenerated on next \`dev\` start. */`,
+    `@import "tailwindcss";`,
+    `@import "${base_css_import_path}";`,
+  ].join("\n");
+
+  writeCompareFile(ide_config_path, content);
+};
+
 export const runTailwindCSSWatcher = () => {
   const { package_root } = config;
 
-  const hasConfig = fs.existsSync(path.join(root_dir, "tailwind.config.js"));
-  const hasPostCss = fs.existsSync(path.join(root_dir, "postcss.config.js"));
-  const inputFile = fs.existsSync(path.join(root_dir, `assets`, `_tailwind.css`));
-  const resetInputFile = fs.existsSync(path.join(root_dir, `assets`, `_reset.css`));
+  const user_css_path = path.join(root_dir, "assets", "_tailwind.css");
+  const input_exists = fs.existsSync(user_css_path);
 
-  if (!inputFile) {
+  if (!input_exists) {
     console.log("Tailwind Input file not found");
     return;
   }
 
-  const filePath = path.join(config.extension_path, `assets`, `tailwind_pre_sort.css`);
+  const base_css_path = path.join(package_root, "src/tailwind/tailwind-base.css");
+
+  // Generate IDE config for Tailwind autocomplete in IntelliJ/WebStorm
+  generateIDEConfig("shopify-accelerate-app/src/tailwind/tailwind-base.css");
+  const generated_input_path = path.join(config.extension_path, "assets", "_tailwind_generated.css");
+  const pre_sort_path = path.join(config.extension_path, "assets", "tailwind_pre_sort.css");
+
+  // Generate the combined input CSS
+  const input_css = generateInputCSS(base_css_path, user_css_path);
+  fs.writeFileSync(generated_input_path, input_css);
 
   /*= =============== Tailwind Watcher ================ */
-  console.log(path.join(root_dir, `assets`, `_tailwind.css`));
-  console.log(path.join(package_root, `src/tailwind/tailwind.config.js`));
+  console.log(`Tailwind v4 input: ${generated_input_path}`);
+  console.log(`Tailwind v4 output: ${pre_sort_path}`);
   child_process.spawn(
     "npx",
     [
-      "tailwindcss",
-      "--config",
-      /*hasConfig ? "tailwind.config.js" :*/ path.join(package_root, `src/tailwind/tailwind.config.js`),
-      "--postcss",
-      /*hasPostCss ? "postcss.config.js" : */ path.join(package_root, `src/tailwind/postcss.config.js`),
+      "@tailwindcss/cli",
       "-i",
-      path.join(root_dir, `assets`, `_tailwind.css`),
+      generated_input_path,
       "-o",
-      filePath,
+      pre_sort_path,
       "--watch",
     ],
     {
@@ -45,11 +150,22 @@ export const runTailwindCSSWatcher = () => {
     }
   );
 
+  // Regenerate input CSS when user's _tailwind.css changes
+  watch(path.join(root_dir, "assets"), { recursive: false }, (evt: string, name: string) => {
+    if (!name.match(/_tailwind\.css$/)) return;
+    try {
+      const updated_css = generateInputCSS(base_css_path, user_css_path);
+      fs.writeFileSync(generated_input_path, updated_css);
+    } catch (err) {
+      console.log(err);
+    }
+  });
+
   /*= =============== Tailwind Plugin Order ================ */
-  watch(path.join(config.extension_path, "assets"), { recursive: false }, async (evt, name) => {
+  watch(path.join(config.extension_path, "assets"), { recursive: false }, async (evt: string, name: string) => {
     try {
-      if (!name.match(/tailwind_pre_sort.css$/) || !fs.existsSync(filePath)) return;
-      const file = fs.readFileSync(filePath, { encoding: "utf-8" });
+      if (!name.match(/tailwind_pre_sort.css$/) || !fs.existsSync(pre_sort_path)) return;
+      const file = fs.readFileSync(pre_sort_path, { encoding: "utf-8" });
 
       const top = file
         .split(/\n}/gi)
@@ -61,27 +177,27 @@ export const runTailwindCSSWatcher = () => {
         .join("\n}")}\n`;
       const content = top + bottom;
 
-      const classesInOrder = [];
-      const omitCompoundClasses = [":not", ":where", ">", "*", ","];
+      const classes_in_order: string[] = [];
+      const omit_compound_classes = [":not", ":where", ">", "*", ","];
 
       content.split("\n").forEach((line) => {
         if (!line.startsWith(".")) {
           return;
         }
 
-        let writeOut = true;
+        let write_out = true;
 
-        omitCompoundClasses.forEach((classToOmit) => {
-          if (line.includes(classToOmit)) {
-            writeOut = false;
+        omit_compound_classes.forEach((class_to_omit) => {
+          if (line.includes(class_to_omit)) {
+            write_out = false;
             return;
           }
         });
 
-        if (writeOut) {
-          const finalClassName = line.replace(/\./g, "").replace(/{/g, "").replace(/}/g, "").replace(/\\/g, "").trim();
-          if (finalClassName !== "") {
-            classesInOrder.push(`${finalClassName}`);
+        if (write_out) {
+          const final_class_name = line.replace(/\./g, "").replace(/{/g, "").replace(/}/g, "").replace(/\\/g, "").trim();
+          if (final_class_name !== "") {
+            classes_in_order.push(`${final_class_name}`);
           }
         }
       });
@@ -92,13 +208,14 @@ export const runTailwindCSSWatcher = () => {
         writeCompareFile(path.join(config.theme_output_path, `assets/listify-dev-tailwind.css`), content);
       }
 
+      // v4 prefix uses colon separator (tw:flex) instead of dash (tw-flex)
       writeCompareFile(
         path.join(process.cwd(), ".tailwindorder"),
-        classesInOrder
+        classes_in_order
           .join("\n")
           .replace(
             new RegExp(
-              `${process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX ? `${process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX}-` : ""}`,
+              `${process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX ? `${process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX}:` : ""}`,
               "gi"
             ),
             ""

package/src/tailwind/postcss.config.js

@@ -1,8 +0,0 @@
-module.exports = {
-  plugins: {
-    "postcss-import": {},
-    "tailwindcss/nesting": {},
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};

package/src/tailwind/tailwind.config.js

@@ -1,462 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-// eslint-disable-next-line node/no-unpublished-require
-// import { require } from "../../require";
-const { defaultExtractor: createDefaultExtractor } = require("tailwindcss/lib/lib/defaultExtractor");
-
-const { default: resolveConfig } = require("tailwindcss/lib/util/resolveConfig");
-const plugin = require("tailwindcss/plugin");
-import { dotenvLoad } from "dotenv-mono";
-const dotenv = dotenvLoad(); // Dotenv instance
-
-/*const defaultExtractor = createDefaultExtractor({
-  tailwindConfig: resolveConfig([
-    {
-      content: [
-        `${process.env.SHOPIFY_ACCELERATE_EXTENSION_PATH}/!**!/!*.{html,liquid,js,json}`,
-        `!${process.env.SHOPIFY_ACCELERATE_EXTENSION_PATH}/!**!/!*.css`,
-        `!${process.env.SHOPIFY_ACCELERATE_EXTENSION_PATH}/!**!/!*.css`,
-      ],
-    },
-  ]),
-});
-
-const extractor = (content) => {
-  return defaultExtractor(content).map((cls) => {
-    console.log({ class: cls });
-    return `tw-${cls}`;
-  });
-};*/
-
-module.exports = {
-  content: {
-    files: [
-      `${process.env.SHOPIFY_ACCELERATE_EXTENSION_PATH}/**/*.{html,liquid,js,json}`,
-      `!${process.env.SHOPIFY_ACCELERATE_EXTENSION_PATH}/!**!/!*.css`,
-      `!${process.env.SHOPIFY_ACCELERATE_EXTENSION_PATH}/!**/!*.css`,
-    ],
-    extract: {
-      // ts: extractor,
-      // tsx: extractor,
-      // html: extractor,
-      // liquid: (content) => {
-      //   console.log({ content });
-      //   return content;
-      // },
-      // js: extractor,
-      // json: extractor,
-    },
-  },
-  safelist: [
-    `!${process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX ? `${process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX}-` : ""}fixed`,
-    `${process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX ? `${process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX}-` : ""}inset-0`,
-    `${process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX ? `${process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX}-` : ""}pointer-events-none`,
-    `${
-      process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX ? `${process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX}-` : ""
-    }[&>*]:pointer-events-auto`,
-  ],
-  darkMode: "class", // or 'media' or 'class'
-  // mode: process.env.NODE_ENV ? "jit" : undefined,
-  // important: true,
-  important: process.env.SHOPIFY_ACCELERATE_TAILWIND_IMPORTANT,
-  prefix: process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX ? `${process.env.SHOPIFY_ACCELERATE_TAILWIND_PREFIX}-` : undefined,
-  corePlugins: {
-    preflight: false,
-  },
-  mode: "jit",
-  theme: {
-    borderRadius: {
-      none: "0px",
-      sm: "2px",
-      DEFAULT: "4px",
-      md: "6px",
-      lg: "8px",
-      xl: "12px",
-      "2xl": "16px",
-      "3xl": "24px",
-      full: "9999px",
-    },
-    columns: {
-      auto: "auto",
-      1: "1",
-      2: "2",
-      3: "3",
-      4: "4",
-      5: "5",
-      6: "6",
-      7: "7",
-      8: "8",
-      9: "9",
-      10: "10",
-      11: "11",
-      12: "12",
-      "3xs": "256px",
-      "2xs": "288px",
-      xs: "320px",
-      sm: "384px",
-      md: "448px",
-      lg: "512px",
-      xl: "576px",
-      "2xl": "672px",
-      "3xl": "768px",
-      "4xl": "896px",
-      "5xl": "1024px",
-      "6xl": "1152px",
-      "7xl": "1280px",
-      "8xl": "1440px",
-    },
-    fontSize: {
-      8: ["9px", "1.55"],
-      9: ["9px", "1.5"],
-      10: ["10px", "1.5"],
-      11: ["11px", "1.5"],
-      12: ["12px", "1.5"],
-      13: ["13px", "1.5"],
-      14: ["14px", "1.5"],
-      15: ["15px", "1.5"],
-      16: ["16px", "1.5"],
-      17: ["17px", "1.5"],
-      18: ["18px", "1.45"],
-      19: ["19px", "1.45"],
-      20: ["20px", "1.45"],
-      21: ["21px", "1.45"],
-      22: ["22px", "1.4"],
-      23: ["23px", "1.4"],
-      24: ["24px", "1.4"],
-      xs: ["12px", { lineHeight: "16px" }],
-      sm: ["14px", { lineHeight: "20px" }],
-      base: ["16px", { lineHeight: "24px" }],
-      lg: ["18px", { lineHeight: "28px" }],
-      xl: ["20px", { lineHeight: "28px" }],
-      "2xl": ["24px", { lineHeight: "32px" }],
-      "3xl": ["30px", { lineHeight: "36px" }],
-      "4xl": ["36px", { lineHeight: "36px" }],
-      "5xl": ["48px", { lineHeight: "1" }],
-      "6xl": ["60px", { lineHeight: "1" }],
-      "7xl": ["72px", { lineHeight: "1" }],
-      "8xl": ["96px", { lineHeight: "1" }],
-      "9xl": ["144px", { lineHeight: "1" }],
-    },
-    lineHeight: {
-      none: "1",
-      tight: "1.25",
-      snug: "1.375",
-      normal: "1.5",
-      relaxed: "1.625",
-      loose: "2",
-      3: "12px",
-      4: "16px",
-      5: "20px",
-      6: "24px",
-      7: "28px",
-      8: "32px",
-      9: "36px",
-      10: "40px",
-    },
-    maxWidth: ({ theme, breakpoints }) => ({
-      none: "none",
-      0: "0px",
-      xs: "320px",
-      sm: "384px",
-      md: "448px",
-      lg: "512px",
-      xl: "576px",
-      "2xl": "672px",
-      "3xl": "768px",
-      "4xl": "896px",
-      "5xl": "1024px",
-      "6xl": "1152px",
-      "7xl": "1280px",
-      full: "100%",
-      min: "min-content",
-      max: "max-content",
-      fit: "fit-content",
-      prose: "65ch",
-      ...breakpoints(theme("screens")),
-    }),
-    spacing: {
-      px: "1px",
-      0: "0",
-      0.5: "2px",
-      1: "4px",
-      1.5: "6px",
-      2: "8px",
-      2.5: "10px",
-      3: "12px",
-      3.5: "14px",
-      4: "16px",
-      5: "20px",
-      6: "24px",
-      7: "28px",
-      8: "32px",
-      9: "36px",
-      10: "40px",
-      11: "44px",
-      12: "48px",
-      14: "56px",
-      16: "64px",
-      20: "80px",
-      24: "96px",
-      28: "112px",
-      32: "128px",
-      36: "144px",
-      40: "160px",
-      44: "176px",
-      48: "192px",
-      52: "208px",
-      56: "224px",
-      60: "240px",
-      64: "256px",
-      72: "288px",
-      80: "320px",
-      96: "384px",
-    },
-    extend: {
-      screens: {
-        xxs: "373px" /* tiny phone*/,
-        xs: "427px" /*smaller than iphone pro max*/,
-      },
-      containers: {
-        xxs: "373px" /* tiny phone*/,
-        xs: "427px" /*smaller than iphone pro max*/,
-        sm: "640px",
-        md: "768px",
-        lg: "1024px",
-        xl: "1280px",
-        "2xl": "1536px",
-        "max-xxs": "-373px" /* tiny phone*/,
-        "max-xs": "-427px" /*smaller than iphone pro max*/,
-        "max-sm": "-640px",
-        "max-md": "-768px",
-        "max-lg": "-1024px",
-        "max-xl": "-1280px",
-        "max-2xl": "-1536px",
-      },
-      fontSize: {
-        8: ["9px", "1.55"],
-        9: ["9px", "1.5"],
-        10: ["10px", "1.5"],
-        11: ["11px", "1.5"],
-        12: ["12px", "1.5"],
-        13: ["13px", "1.5"],
-        14: ["14px", "1.5"],
-        15: ["15px", "1.5"],
-        16: ["16px", "1.5"],
-        17: ["17px", "1.5"],
-        18: ["18px", "1.45"],
-        19: ["19px", "1.45"],
-        20: ["20px", "1.45"],
-        21: ["21px", "1.45"],
-        22: ["22px", "1.4"],
-        23: ["23px", "1.4"],
-        24: ["24px", "1.4"],
-      },
-      maxWidth: {
-        "8xl": "90rem",
-      },
-      boxShadow: {
-        "invert-sm": "0 -1px 2px 0 rgb(0 0 0 / 0.05)",
-        invert: "0 -3px 5px 1px rgb(0 0 0 / 0.03), 0 -2px 4px 2px rgb(0 0 0 / 0.03)",
-        "invert-md": "0 -4px 6px 1px rgb(0 0 0 / 0.07), 0 -2px 4px 2px rgb(0 0 0 / 0.07)",
-        "invert-lg": "0 -10px 15px 3px rgb(0 0 0 / 0.1), 0 -4px 6px 4px rgb(0 0 0 / 0.1)",
-        "invert-xl": "0 -20px 25px 5px rgb(0 0 0 / 0.1), 0 -8px 10px 6px rgb(0 0 0 / 0.1)",
-        "invert-2xl": "0 -25px 50px 12px rgb(0 0 0 / 0.25)",
-      },
-      keyframes: {
-        slide: {
-          "0%, 100%": { transform: "translate3d(0,0,0)" },
-          "100%": { transform: "translate3d(-50%,0,0)" },
-        },
-        marquee1: {
-          "0%, 100%": { transform: "translate3d(0,0,0)" },
-          "100%": { transform: "translate3d(-100%,0,0)" },
-        },
-        marquee2: {
-          "0%, 100%": { transform: "translate3d(100%,0,0)" },
-          "100%": { transform: "translate3d(0,0,0)" },
-        },
-        circle: {
-          "0%": { strokeDashoffset: "90" },
-          "100%": { strokeDashoffset: "0" },
-        },
-        dot: {
-          "0%,95%": { fill: "transparent", stroke: "currentColor", strokeOpacity: "0.1" },
-          "100%": { fill: "currentColor", stroke: "transparent", strokeOpacity: "0" },
-        },
-        typewriter: {
-          "0%, 100%": { opacity: "1" },
-          "50%": { opacity: "0" },
-        },
-        "pulse-bg": {
-          "50%": { "--tw-bg-opacity": "0.5" },
-        },
-      },
-      animation: {
-        slide: "slide 30s linear infinite",
-        marquee1: "marquee1 30s linear infinite",
-        marquee2: "marquee2 30s linear infinite",
-        circle: "circle 8.1s linear",
-        dot: "dot 8.1s linear",
-        typewriter: "typewriter 0.5s linear infinite",
-        "pulse-bg": "pulse-bg 1s cubic-bezier(0.4, 0, 0.6, 1) infinite",
-      },
-      colors: {
-        theme: {
-          "trigger-bg": "rgb(var(--lx-color-trigger-bg) / <alpha-value>)",
-          "trigger-text": "rgb(var(--lx-color-trigger-text) / <alpha-value>)",
-          bg: "rgb(var(--lx-color-bg) / <alpha-value>)",
-          text: "rgb(var(--lx-color-text) / <alpha-value>)",
-          "button-bg": "rgb(var(--lx-color-button-bg) / <alpha-value>)",
-          "button-text": "rgb(var(--lx-color-button-text) / <alpha-value>)",
-        },
-      },
-    },
-    variants: {
-      extend: {},
-    },
-  },
-  plugins: [
-    require("autoprefixer"),
-    require("@tailwindcss/aspect-ratio"),
-    require("tailwindcss-container-queries-with-max-width"),
-    require("tailwindcss-animate"),
-    // require("@tailwindcss/forms"),
-    plugin(({ addVariant, addUtilities, matchUtilities, theme }) => {
-      addVariant("svg", ["& svg"]);
-      addVariant("hfa", ["&:hover", "&:focus", "&:active"]);
-      addVariant("hfw", ["&:hover", "&:focus-visible", "&:focus-within"]);
-      addVariant("hfwa", ["&:hover", "&:focus-visible", "&:focus-within", "&:active"]);
-      addVariant("hfwaa", ["&:hover", "&:focus-visible", "&:focus-within", "&:active", "&.active"]);
-      addVariant("hfva", ["&:hover", "&:focus", "&:focus-visible", "&:active"]);
-      addVariant("ha", ["&:hover", "&:active"]);
-      addVariant("hf", ["&:hover", "&:focus-visible"]);
-      addVariant("fa", ["&:focus", "&:active"]);
-      addVariant("f", ["&:focus"]);
-      addVariant("fw", ["&:focus-within"]);
-      addVariant("fv", ["&:focus-visible"]);
-      addVariant("h", ["&:hover"]);
-      addVariant("d", [".dark &"]);
-      addVariant("ac", ["&.active"]);
-      addVariant("b", ["&::before"]);
-      addVariant("a", ["&::after"]);
-      addVariant("not-prose", [":not(.prose &)&"]);
-      addVariant("hfaa", ["&:hover", "&:focus", "&:active", "&.active"]);
-      addVariant("hfvaa", ["&:hover", "&:focus", "&:focus-visible", "&:active", "&.active"]);
-      addVariant("group-hfa", [".group:hover &", ".group:focus &", ".group:active &"]);
-      addVariant("group-hf", [".group:hover &", ".group:focus &"]);
-      addVariant("group-ac", [".group.active &"]);
-
-      addVariant("group-hfva", [".group:hover &", ".group:focus-visible &", ".group:active &"]);
-      addVariant("group-hfwa", [".group:hover &", ".group:focus-visible &", ".group:focus-within &", ".group:active &"]);
-      addVariant("group-hfw", [".group:hover &", ".group:focus-visible &", ".group:focus-within &"]);
-      addVariant("peer-hfwa", [".peer:hover ~ &", ".peer:focus-visible ~ &", ".peer:focus-within ~ &", ".peer:active ~ &"]);
-      addVariant("peer-fw", [".peer:focus-within ~ &"]);
-      matchUtilities(
-        {
-          "top-spacing": (value) => ({
-            top: `calc(${theme("spacing.top-bar-spacing")} + ${value})`,
-          }),
-        },
-        { values: theme("spacing") }
-      );
-      matchUtilities(
-        {
-          "auto-col-flow": (value) => {
-            if (value?.includes("/")) {
-              const [cols, gap] = value.split("/");
-              const calculatedGap = /^(\d|\.)*$/gi.test(gap?.trim()) ? `${+gap * 4}px` : gap;
-
-              return {
-                gridAutoFlow: `column`,
-                gridAutoColumns: ` calc((100% - (${calculatedGap} * (${cols} - 1))) / ${cols})`,
-                columnGap: `${calculatedGap}`,
-              };
-            }
-            return {
-              gridAutoFlow: `column`,
-              gridAutoColumns: `${value}`,
-            };
-          },
-        },
-        { values: theme("width") }
-      );
-      /*matchUtilities(
-        {
-          "border-w": (value) => ({
-            borderWidth: `${value}`,
-          }),
-        },
-        { values: theme("spacing") }
-      );
-      matchUtilities(
-        {
-          "border-x-w": (value) => ({
-            borderLeftWidth: `${value}`,
-            borderRightWidth: `${value}`,
-          }),
-        },
-        { values: theme("spacing") }
-      );
-      matchUtilities(
-        {
-          "border-l-w": (value) => ({
-            borderLeftWidth: `${value}`,
-          }),
-        },
-        { values: theme("spacing") }
-      );
-      matchUtilities(
-        {
-          "border-r-w": (value) => ({
-            borderRightWidth: `${value}`,
-          }),
-        },
-        { values: theme("spacing") }
-      );
-      matchUtilities(
-        {
-          "border-y-w": (value) => ({
-            borderTopWidth: `${value}`,
-            borderBottomWidth: `${value}`,
-          }),
-        },
-        { values: theme("spacing") }
-      );
-      matchUtilities(
-        {
-          "border-t-w": (value) => ({
-            borderTopWidth: `${value}`,
-          }),
-        },
-        { values: theme("spacing") }
-      );
-      matchUtilities(
-        {
-          "border-b-w": (value) => ({
-            borderBottomWidth: `${value}`,
-          }),
-        },
-        { values: theme("spacing") }
-      );*/
-      addUtilities({
-        ".shape-geometric-precision": {
-          "shape-rendering": "geometricPrecision",
-        },
-        ".open-quote": {
-          content: "open-quote",
-        },
-        ".close-quote": {
-          content: "close-quote",
-        },
-        ".leading-0": {
-          "line-height": "0",
-        },
-        ".animation-pause": {
-          "animation-play-state": "paused",
-        },
-        ".animation-play": {
-          "animation-play-state": "running",
-        },
-      });
-    }),
-  ],
-};