Metro Bundler hangs on 99.9% with this global.css setup

[dv00d00]

Describe the bug
Having hsl var in tailwind.config.js or/and global.css causes metro bundler for android api 35 (OS: Windows 11) to hang with this output

Correction: it is likely not related to hsl, there is something special in the vibe coded global.css which causes this hang

Correction 2: commenting out one of the @layer base {} blocks fixes hang

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

/* First Bites Design System - Muted colors with subtle violet accents */

@layer base {
    :root {
      /* Muted Brand Colors - Pastel Violet */
      --primary-violet: 179 153 204;        /* Soft violet for subtle accents */
      --primary-violet-light: 204 194 217;  /* Very light violet */
      --primary-violet-dark: 153 122 191;   /* Slightly darker violet */
      
      --sage-green: 114 127 97;           /* Muted sage green */
      --sage-green-light: 136 143 130;     /* Light muted sage */
      --sage-green-dark: 92 107 82;      /* Dark muted sage */
      
      --neutral-50: 250 250 252;          /* Very light neutral */
      --neutral-100: 241 243 247;         /* Light neutral */
      --neutral-200: 228 232 240;         /* Lighter gray */
      --neutral-300: 209 215 227;         /* Light gray */
      --neutral-400: 175 185 203;         /* Medium gray */
      --neutral-500: 143 152 168;         /* Balanced gray */
      --neutral-600: 104 115 132;         /* Dark gray */
      --neutral-700: 77 89 107;         /* Darker gray */
      --neutral-800: 53 61 76;         /* Very dark gray */
      --neutral-900: 34 39 51;         /* Darkest gray */
      
      --trust-blue: 102 153 204;          /* Muted blue for trust elements */
      --warning-orange: 219 168 102;       /* Softer orange for warnings */
      --success-green: 102 179 102;       /* Muted green for success */
      
      /* Shadcn UI Compatible Colors */
      --background: var(--neutral-50);
      --foreground: var(--neutral-800);
  
      --card: 255 255 255;
      --card-foreground: var(--foreground);
  
      --popover: 255 255 255;
      --popover-foreground: var(--foreground);
  
      --primary: var(--primary-violet);
      --primary-foreground: 255 255 255;
  
      --secondary: var(--neutral-100);
      --secondary-foreground: var(--neutral-700);
  
      --muted: var(--neutral-100);
      --muted-foreground: var(--neutral-500);
  
      --accent: var(--neutral-100);
      --accent-foreground: var(--neutral-700);
  
      --destructive: var(--warning-orange);
      --destructive-foreground: 255 255 255;
  
      --border: var(--neutral-200);
      --input: var(--neutral-100);
      --ring: var(--primary-violet);
  
      --radius: 0.75rem;
  
      --sidebar-background: var(--neutral-50);
      --sidebar-foreground: var(--foreground);
      --sidebar-primary: var(--primary-violet);
      --sidebar-primary-foreground: 255 255 255;
      --sidebar-accent: var(--neutral-100);
      --sidebar-accent-foreground: var(--neutral-700);
      --sidebar-border: var(--neutral-200);
      --sidebar-ring: var(--primary-violet);
    }
  
    .dark {
      /* Dark mode with muted slate colors */
      --background: var(--neutral-900);
      --foreground: var(--neutral-100);
  
      --card: var(--neutral-800);
      --card-foreground: var(--foreground);
  
      --popover: var(--neutral-800);
      --popover-foreground: var(--foreground);
  
      --primary: var(--primary-violet-light);
      --primary-foreground: var(--neutral-900);
  
      --secondary: var(--neutral-700);
      --secondary-foreground: var(--neutral-200);
  
      --muted: var(--neutral-800);
      --muted-foreground: var(--neutral-400);
  
      --accent: var(--neutral-700);
      --accent-foreground: var(--neutral-200);
  
      --destructive: var(--warning-orange);
      --destructive-foreground: 255 255 255;
  
      --border: var(--neutral-700);
      --input: var(--neutral-800);
      --ring: var(--primary-violet-light);
  
      --sidebar-background: var(--neutral-900);
      --sidebar-foreground: var(--foreground);
      --sidebar-primary: var(--primary-violet-light);
      --sidebar-primary-foreground: var(--neutral-900);
      --sidebar-accent: var(--neutral-700);
      --sidebar-accent-foreground: var(--neutral-200);
      --sidebar-border: var(--neutral-700);
      --sidebar-ring: var(--primary-violet-light);
    }
  }
  
  @layer base {
    * {
      @apply border-border;
    }
  
    body {
      @apply bg-background text-foreground font-body;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
  
    /* Typography scale for baby app */
    .text-display {
      @apply text-4xl font-display font-bold leading-tight;
    }
    
    .text-heading-1 {
      @apply text-3xl font-display font-bold leading-tight;
    }
    
    .text-heading-2 {
      @apply text-2xl font-display font-semibold leading-snug;
    }
    
    .text-heading-3 {
      @apply text-xl font-display font-semibold leading-snug;
    }
    
    .text-body-large {
      @apply text-lg font-body font-normal leading-relaxed;
    }
    
    .text-body {
      @apply text-base font-body font-normal leading-relaxed;
    }
    
    .text-body-small {
      @apply text-sm font-body font-normal leading-relaxed;
    }
    
    .text-caption {
      @apply text-xs font-body font-medium leading-normal;
    }
  }
  
  /* Subtle gradient backgrounds for First Bites */
  @layer utilities {
    .bg-gradient-subtle {
      background: linear-gradient(135deg, rgb(var(--neutral-50)), rgb(var(--neutral-100)));
    }
    
    .bg-gradient-violet-subtle {
      background: linear-gradient(135deg, rgb(var(--primary-violet-light)), rgb(var(--primary-violet)));
    }
    
    .bg-gradient-sage-subtle {
      background: linear-gradient(135deg, rgb(var(--sage-green-light)), rgb(var(--sage-green)));
    }
  }

Android node_modules\expo-router\entry.js ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░ 99.8% (1257/1258)

Reproduction

https://github.com/dv00d00/metro-bundler-hang-repro

Expected behavior
Fail fast with error message during build, or during bundling

[Danivation]

having this issue too with a different css setup but i dont know what is causing it

[Msamir22]

facing the same issue too, I'm using the @layer and @apply directives as well in my global.css

[Msamir22]

facing the same issue too, I'm using the @layer and @apply directives as well in my global.css

I was able to fix the issue; there was something wrong in my tailwind.config.js, and it was hard to find where the issue was after hours of debugging. It would be great if the Metro bundler could throw an error if there is a misconfiguration in the tailwind.config.js

[joewired]

Similar issue in a monorepo set up.

Had to do this to make it work:

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

/* Your shared theme configuration using CSS custom properties /
/@layer base {/
/ :root {/
/ !* shadcn/ui Blue Theme - Light Mode !/
/* --background: 0 0% 100%;/
/ --foreground: 222.2 84% 4.9%;/
/ --card: 0 0% 100%;/
/ --card-foreground: 222.2 84% 4.9%;/
/ --popover: 0 0% 100%;/
/ --popover-foreground: 222.2 84% 4.9%;/
/ --primary: 221.2 83.2% 53.3%;/
/ --primary-foreground: 210 40% 98%;/
/ --secondary: 210 40% 96.1%;/
/ --secondary-foreground: 222.2 47.4% 11.2%;/
/ --muted: 210 40% 96.1%;/
/ --muted-foreground: 215.4 16.3% 46.9%;/
/ --accent: 210 40% 96.1%;/
/ --accent-foreground: 222.2 47.4% 11.2%;/
/ --destructive: 0 84.2% 60.2%;/
/ --destructive-foreground: 210 40% 98%;/
/ --border: 214.3 31.8% 91.4%;/
/ --input: 214.3 31.8% 91.4%;/
/ --ring: 221.2 83.2% 53.3%;/
/ --radius: 0.5rem;/
/ --chart-1: 12 76% 61%;/
/ --chart-2: 173 58% 39%;/
/ --chart-3: 197 37% 24%;/
/ --chart-4: 43 74% 66%;/
/ --chart-5: 27 87% 67%;*/

/* !* Zone colors using HSL !/
/* --zones-cruise: 221.2 83.2% 53.3%; !* Blue theme primary !/
/* --zones-push: 142.1 76.2% 36.3%; !* Green !/
/* --zones-burn: 24.6 95% 53.1%; !* Orange !/
/* --zones-skill: 262.1 83.3% 57.8%; !* Purple !/

/* !* Sidebar colors !/
/* --sidebar: 0 0% 98%;/
/ --sidebar-foreground: 240 5.3% 26.1%;/
/ --sidebar-primary: 240 5.9% 10%;/
/ --sidebar-primary-foreground: 0 0% 98%;/
/ --sidebar-accent: 240 4.8% 95.9%;/
/ --sidebar-accent-foreground: 240 5.9% 10%;/
/ --sidebar-border: 220 13% 91%;/
/ --sidebar-ring: 217.2 91.2% 59.8%;/
/ }*/

/* .dark {/
/ !* shadcn/ui Blue Theme - Dark Mode !/
/* --background: 222.2 84% 4.9%;/
/ --foreground: 210 40% 98%;/
/ --card: 222.2 84% 4.9%;/
/ --card-foreground: 210 40% 98%;/
/ --popover: 222.2 84% 4.9%;/
/ --popover-foreground: 210 40% 98%;/
/ --primary: 217.2 91.2% 59.8%;/
/ --primary-foreground: 222.2 47.4% 11.2%;/
/ --secondary: 217.2 32.6% 17.5%;/
/ --secondary-foreground: 210 40% 98%;/
/ --muted: 217.2 32.6% 17.5%;/
/ --muted-foreground: 215 20.2% 65.1%;/
/ --accent: 217.2 32.6% 17.5%;/
/ --accent-foreground: 210 40% 98%;/
/ --destructive: 0 62.8% 30.6%;/
/ --destructive-foreground: 210 40% 98%;/
/ --border: 217.2 32.6% 17.5%;/
/ --input: 217.2 32.6% 17.5%;/
/ --ring: 224.3 76.3% 48%;/
/ --chart-1: 220 70% 50%;/
/ --chart-2: 160 60% 45%;/
/ --chart-3: 30 80% 55%;/
/ --chart-4: 280 65% 60%;/
/ --chart-5: 340 75% 55%;*/

/* !* Zone colors for dark mode !/
/* --zones-cruise: 217.2 91.2% 59.8%; !* Blue theme primary for dark !/
/* --zones-push: 142.1 70.6% 45.3%; !* Green for dark !/
/* --zones-burn: 20.5 90.2% 48.2%; !* Orange for dark !/
/* --zones-skill: 263.4 70% 50.4%; !* Purple for dark !/

/* !* Dark sidebar colors !/
/* --sidebar: 240 5.9% 10%;/
/ --sidebar-foreground: 240 4.8% 95.9%;/
/ --sidebar-primary: 224.3 76.3% 48%;/
/ --sidebar-primary-foreground: 0 0% 100%;/
/ --sidebar-accent: 240 3.7% 15.9%;/
/ --sidebar-accent-foreground: 240 4.8% 95.9%;/
/ --sidebar-border: 240 3.7% 15.9%;/
/ --sidebar-ring: 217.2 91.2% 59.8%;/
/ }*/

/* * {/
/ @apply border-border outline-ring/50;/
/ }*/

/* body {/
/ @apply bg-background text-foreground;/
/ }/
/}*/

/* Custom mobile styles can be added below */

Moved the styles to tailwind.config.mjs instead.

...
theme: {
extend: {
colors: {
// Primary colors
primary: {
light: '#63B3ED', // Light blue
DEFAULT: '#3498db', // Main blue - this makes 'bg-primary' work
dark: '#2C5282', // Dark blue
},
...

[danstepanov]

This was caused by a CSS configuration issue, as identified in the comments. Closing as resolved.