Baike.dev
Log in
Back to tool/Back to issues
#3279·html2canvas

Tailwinds uppercase is making the word-wrap during html2canvas export as png or others

Author: Abhishek-kumar09Created Apr 7, 2026Updated Aug 21, 2026

Image 1 screenshot:

Image

Image 2 Screenshot:

Image

HTML 1: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Screen</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&family=Poppins:[email protected]&family=Fira+Code:[email protected]&family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://code.iconify.design/iconify-icon/3.0.0/iconify-icon.min.js"></script>
    <style type="text/tailwindcss">
      @theme inline {
        --color-background: var(--background);
        --color-foreground: var(--foreground);
        --color-primary: var(--primary);
        --color-primary-foreground: var(--primary-foreground);
        --color-secondary: var(--secondary);
        --color-secondary-foreground: var(--secondary-foreground);
        --color-tertiary: var(--tertiary);
        --color-muted: var(--muted);
        --color-muted-foreground: var(--muted-foreground);
        --color-accent: var(--accent);
        --color-destructive: var(--destructive);
        --color-card: var(--card);
        --color-card-foreground: var(--card-foreground);
        --color-border: var(--border);
        --color-input: var(--input);
        --color-ring: var(--ring);
        --radius-sm: calc(var(--radius) - 4px);
        --radius-md: calc(var(--radius) - 2px);
        --radius-lg: var(--radius);
        --font-family-sans: var(--font-sans);
        --font-family-heading: var(--font-heading);
      }
      :root {
        --card: #FFFFFF;
        --muted: #F1F5F9;
        --font-sans: Inter, sans-serif;
        --background: #FAFAFA;
        --primary-foreground: #FFFFFF;
        --muted-foreground: #64748B;
        --accent: #F1F5F9;
        --border: #E2E8F0;
        --tertiary: #10B981;
        --font-heading: Inter, sans-serif;
        --foreground: #0F172A;
        --card-foreground: #0F172A;
        --radius: 1rem;
        --destructive: #F43F5E;
        --secondary-foreground: #FFFFFF;
        --input: #E2E8F0;
        --primary: #2563EB;
        --secondary: #64748B;
        --ring: #2563EB;
        }
    </style>
  </head>
  <body>
<div class="min-h-screen w-full bg-background flex flex-col relative font-sans text-foreground">
  <!-- Header -->
  <header class="p-6 pb-4 flex justify-between items-center bg-background/80 backdrop-blur-md sticky top-0 z-50">
    <div class="flex flex-col">
      <span class="text-xs font-medium text-muted-foreground uppercase tracking-widest mb-1">Financial Pulse</span>
      <h1 class="text-2xl font-heading font-bold tracking-tight">Dashboard</h1>
    </div>
    <div class="flex gap-3">
      <button class="w-10 h-10 rounded-full bg-card border-2 border-border flex items-center justify-center shadow-sm relative">
        <iconify-icon icon="lucide:bell" class="text-lg text-muted-foreground"></iconify-icon>
        <span class="absolute top-2.5 right-2.5 w-2 h-2 bg-destructive rounded-full border-2 border-white"></span>
      </button>
      <div class="w-10 h-10 rounded-full bg-primary/10 border-2 border-primary/20 overflow-hidden">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-full h-full object-cover">
      </div>
    </div>
  </header>

  <!-- Main Scrollable Content -->
  <main class="flex-1 px-6 pb-32 space-y-6 overflow-y-auto max-h-[800px]">
    <!-- Spending Overview Card -->
    <section class="bg-card border-2 border-border p-6 rounded-3xl shadow-sm relative overflow-hidden group">
      <div class="flex justify-between items-start mb-6">
        <div>
          <h2 class="text-sm font-medium text-muted-foreground mb-1 tracking-wide">Daily Spending</h2>
          <p class="text-3xl font-heading font-bold tabular-nums">$142.50</p>
        </div>
        <div class="h-10 w-24 overflow-hidden">
          <canvas id="sparklineChart" height="40"></canvas>
          <script>
            (function() {
              const ctx = document.getElementById('sparklineChart').getContext('2d');
              new Chart(ctx, {
                type: 'line',
                data: {
                  labels: [1, 2, 3, 4, 5, 6, 7],
                  datasets: [{
                    data: [120, 150, 110, 180, 140, 190, 142.50],
                    borderColor: '#2563EB',
                    borderWidth: 2,
                    pointRadius: 0,
                    tension: 0.4,
                    fill: false
                  }]
                },
                options: {
                  maintainAspectRatio: false,
                  plugins: { legend: { display: false } },
                  scales: { x: { display: false }, y: { display: false } }
                }
              });
            })();
          </script>
        </div>
      </div>
      <div class="flex items-center gap-2 text-xs font-medium text-tertiary bg-tertiary/10 w-fit px-2 py-1 rounded-full">
        <iconify-icon icon="lucide:trending-down" class="text-sm"></iconify-icon>
        <span>12% less than yesterday</span>
      </div>
    </section>

    <!-- Budget Categories -->
    <section class="space-y-4">
      <div class="flex justify-between items-end">
        <h2 class="text-lg font-heading font-semibold">Budget Pulse</h2>
        <button class="text-xs font-semibold text-primary uppercase tracking-wider">See All</button>
      </div>

      <!-- Category 1: Housing (Glassmorphic Progress) -->
      <div class="bg-card border-2 border-border p-5 rounded-2xl shadow-sm space-y-3">
        <div class="flex justify-between items-center">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-xl bg-primary/10 text-primary flex items-center justify-center">
              <iconify-icon icon="lucide:home" class="text-xl"></iconify-icon>
            </div>
            <span class="text-sm font-medium">Housing & Utilities</span>
          </div>
          <span class="text-sm font-semibold tabular-nums">$1,200 / $1,500</span>
        </div>
        <div class="h-3 bg-muted rounded-full overflow-hidden relative">
          <div class="absolute top-0 left-0 h-full bg-primary/80 backdrop-blur-sm rounded-full w-4/5"></div>
        </div>
      </div>

      <!-- Category 2: Food & Dining (Alert Coral) -->
      <div class="bg-card border-2 border-border p-5 rounded-2xl shadow-sm space-y-3">
        <div class="flex justify-between items-center">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-xl bg-destructive/10 text-destructive flex items-center justify-center">
              <iconify-icon icon="lucide:shopping-cart" class="text-xl"></iconify-icon>
            </div>
            <span class="text-sm font-medium">Dining & Groceries</span>
          </div>
          <span class="text-sm font-semibold tabular-nums">$520 / $450</span>
        </div>
        <div class="h-3 bg-muted rounded-full overflow-hidden relative">
          <div class="absolute top-0 left-0 h-full bg-destructive rounded-full w-full"></div>
        </div>
        <div class="flex items-center gap-1.5 text-destructive text-[10px] font-bold uppercase tracking-widest">
          <iconify-icon icon="lucide:circle-alert" class="text-xs"></iconify-icon>
          <span>Over budget by $70</span>
        </div>
      </div>
    </section>

    <!-- SMS Sync Status -->
    <section class="bg-primary/5 border-2 border-primary/10 p-4 rounded-2xl flex items-center justify-between">
      <div class="flex items-center gap-3">
        <div class="w-2 h-2 bg-tertiary rounded-full animate-pulse shadow-sm shadow-tertiary/50"></div>
        <span class="text-xs font-medium text-primary uppercase tracking-widest">SMS Sync Active</span>
      </div>
      <span class="text-[10px] text-muted-foreground font-medium">Last sync 2m ago</span>
    </section>
  </main>

  <!-- Bottom Navigation (Thumb Zone) -->
  <nav class="absolute bottom-6 left-6 right-6 bg-card/90 backdrop-blur-xl border-2 border-border rounded-3xl p-3 shadow-xl flex justify-between items-center z-50">
    <button class="flex-1 flex flex-col items-center gap-1 py-2 text-primary">
      <iconify-icon icon="lucide:layout-dashboard" class="text-xl"></iconify-icon>
      <span class="text-[10px] font-bold uppercase tracking-tighter">Pulse</span>
    </button>
    <button class="flex-1 flex flex-col items-center gap-1 py-2 text-muted-foreground relative">
      <iconify-icon icon="lucide:list" class="text-xl"></iconify-icon>
      <span class="text-[10px] font-medium uppercase tracking-tighter">Ledger</span>
      <span class="absolute top-2 right-1/4 w-1.5 h-1.5 bg-destructive rounded-full border border-white"></span>
    </button>
    <!-- FAB -->
    <div class="flex-1 flex justify-center -translate-y-6">
      <button class="w-14 h-14 bg-primary text-primary-foreground rounded-2xl flex items-center justify-center shadow-lg shadow-primary/30 border-4 border-background active:scale-95 transition-transform">
        <iconify-icon icon="lucide:plus" class="text-2xl"></iconify-icon>
      </button>
    </div>
    <button class="flex-1 flex flex-col items-center gap-1 py-2 text-muted-foreground">
      <iconify-icon icon="lucide:chart-bar" class="text-xl"></iconify-icon>
      <span class="text-[10px] font-medium uppercase tracking-tighter">Insights</span>
    </button>
    <button class="flex-1 flex flex-col items-center gap-1 py-2 text-muted-foreground">
      <iconify-icon icon="lucide:settings" class="text-xl"></iconify-icon>
      <span class="text-[10px] font-medium uppercase tracking-tighter">Setup</span>
    </button>
  </nav>
</div>
</body></html>

HTML 2: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Screen</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&family=Poppins:[email protected]&family=Fira+Code:[email protected]&family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://code.iconify.design/iconify-icon/3.0.0/iconify-icon.min.js"></script>
    <style type="text/tailwindcss">
      @theme inline {
        --color-background: var(--background);
        --color-foreground: var(--foreground);
        --color-primary: var(--primary);
        --color-primary-foreground: var(--primary-foreground);
        --color-secondary: var(--secondary);
        --color-secondary-foreground: var(--secondary-foreground);
        --color-tertiary: var(--tertiary);
        --color-muted: var(--muted);
        --color-muted-foreground: var(--muted-foreground);
        --color-accent: var(--accent);
        --color-destructive: var(--destructive);
        --color-card: var(--card);
        --color-card-foreground: var(--card-foreground);
        --color-border: var(--border);
        --color-input: var(--input);
        --color-ring: var(--ring);
        --radius-sm: calc(var(--radius) - 4px);
        --radius-md: calc(var(--radius) - 2px);
        --radius-lg: var(--radius);
        --font-family-sans: var(--font-sans);
        --font-family-heading: var(--font-heading);
      }
      :root {
        --card: #FFFFFF;
        --muted: #F1F5F9;
        --font-sans: Inter, sans-serif;
        --background: #FAFAFA;
        --primary-foreground: #FFFFFF;
        --muted-foreground: #64748B;
        --accent: #F1F5F9;
        --border: #E2E8F0;
        --tertiary: #10B981;
        --font-heading: Inter, sans-serif;
        --foreground: #0F172A;
        --card-foreground: #0F172A;
        --radius: 1rem;
        --destructive: #F43F5E;
        --secondary-foreground: #FFFFFF;
        --input: #E2E8F0;
        --primary: #2563EB;
        --secondary: #64748B;
        --ring: #2563EB;
        }
    </style>
  </head>
  <body>
<div class="min-h-screen w-full bg-background flex flex-col relative font-sans text-foreground">
  <!-- Header -->
  <header class="p-6 pb-4 flex justify-between items-center bg-background/80 backdrop-blur-md sticky top-0 z-50">
    <div class="flex flex-col">
      <span class="text-xs font-medium text-muted-foreground uppercase tracking-widest mb-1">Financial Pulse</span>
      <h1 class="text-2xl font-heading font-bold tracking-tight">Dashboard</h1>
    </div>
    <div class="flex gap-3">
      <button class="w-10 h-10 rounded-full bg-card border-2 border-border flex items-center justify-center shadow-sm relative">
        <iconify-icon icon="lucide:bell" class="text-lg text-muted-foreground"></iconify-icon>
        <span class="absolute top-2.5 right-2.5 w-2 h-2 bg-destructive rounded-full border-2 border-white"></span>
      </button>
      <div class="w-10 h-10 rounded-full bg-primary/10 border-2 border-primary/20 overflow-hidden">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-full h-full object-cover">
      </div>
    </div>
  </header>

  <!-- Main Scrollable Content -->
  <main class="flex-1 px-6 pb-32 space-y-6 overflow-y-auto max-h-[800px]">
    <!-- Spending Overview Card -->
    <section class="bg-card border-2 border-border p-6 rounded-3xl shadow-sm relative overflow-hidden group">
      <div class="flex justify-between items-start mb-6">
        <div>
          <h2 class="text-sm font-medium text-muted-foreground mb-1 tracking-wide">Daily Spending</h2>
          <p class="text-3xl font-heading font-bold tabular-nums">$142.50</p>
        </div>
        <div class="h-10 w-24 overflow-hidden">
          <canvas id="sparklineChart" height="40"></canvas>
          <script>
            (function() {
              const ctx = document.getElementById('sparklineChart').getContext('2d');
              new Chart(ctx, {
                type: 'line',
                data: {
                  labels: [1, 2, 3, 4, 5, 6, 7],
                  datasets: [{
                    data: [120, 150, 110, 180, 140, 190, 142.50],
                    borderColor: '#2563EB',
                    borderWidth: 2,
                    pointRadius: 0,
                    tension: 0.4,
                    fill: false
                  }]
                },
                options: {
                  maintainAspectRatio: false,
                  plugins: { legend: { display: false } },
                  scales: { x: { display: false }, y: { display: false } }
                }
              });
            })();
          </script>
        </div>
      </div>
      <div class="flex items-center gap-2 text-xs font-medium text-tertiary bg-tertiary/10 w-fit px-2 py-1 rounded-full">
        <iconify-icon icon="lucide:trending-down" class="text-sm"></iconify-icon>
        <span>12% less than yesterday</span>
      </div>
    </section>

    <!-- Budget Categories -->
    <section class="space-y-4">
      <div class="flex justify-between items-end">
        <h2 class="text-lg font-heading font-semibold">Budget Pulse</h2>
        <button class="text-xs font-semibold text-primary tracking-wider">See All</button>
      </div>

      <!-- Category 1: Housing (Glassmorphic Progress) -->
      <div class="bg-card border-2 border-border p-5 rounded-2xl shadow-sm space-y-3">
        <div class="flex justify-between items-center">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-xl bg-primary/10 text-primary flex items-center justify-center">
              <iconify-icon icon="lucide:home" class="text-xl"></iconify-icon>
            </div>
            <span class="text-sm font-medium">Housing & Utilities</span>
          </div>
          <span class="text-sm font-semibold tabular-nums">$1,200 / $1,500</span>
        </div>
        <div class="h-3 bg-muted rounded-full overflow-hidden relative">
          <div class="absolute top-0 left-0 h-full bg-primary/80 backdrop-blur-sm rounded-full w-4/5"></div>
        </div>
      </div>

      <!-- Category 2: Food & Dining (Alert Coral) -->
      <div class="bg-card border-2 border-border p-5 rounded-2xl shadow-sm space-y-3">
        <div class="flex justify-between items-center">
          <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-xl bg-destructive/10 text-destructive flex items-center justify-center">
              <iconify-icon icon="lucide:shopping-cart" class="text-xl"></iconify-icon>
            </div>
            <span class="text-sm font-medium">Dining & Groceries</span>
          </div>
          <span class="text-sm font-semibold tabular-nums">$520 / $450</span>
        </div>
        <div class="h-3 bg-muted rounded-full overflow-hidden relative">
          <div class="absolute top-0 left-0 h-full bg-destructive rounded-full w-full"></div>
        </div>
        <div class="flex items-center gap-1.5 text-destructive text-[10px] font-bold uppercase tracking-widest">
          <iconify-icon icon="lucide:circle-alert" class="text-xs"></iconify-icon>
          <span>Over budget by $70</span>
        </div>
      </div>
    </section>

    <!-- SMS Sync Status -->
    <section class="bg-primary/5 border-2 border-primary/10 p-4 rounded-2xl flex items-center justify-between">
      <div class="flex items-center gap-3">
        <div class="w-2 h-2 bg-tertiary rounded-full animate-pulse shadow-sm shadow-tertiary/50"></div>
        <span class="text-xs font-medium text-primary uppercase tracking-widest">SMS Sync Active</span>
      </div>
      <span class="text-[10px] text-muted-foreground font-medium">Last sync 2m ago</span>
    </section>
  </main>

  <!-- Bottom Navigation (Thumb Zone) -->
  <nav class="absolute bottom-6 left-6 right-6 bg-card/90 backdrop-blur-xl border-2 border-border rounded-3xl p-3 shadow-xl flex justify-between items-center z-50">
    <button class="flex-1 flex flex-col items-center gap-1 py-2 text-primary">
      <iconify-icon icon="lucide:layout-dashboard" class="text-xl"></iconify-icon>
      <span class="text-[10px] font-bold uppercase tracking-tighter">Pulse</span>
    </button>
    <button class="flex-1 flex flex-col items-center gap-1 py-2 text-muted-foreground relative">
      <iconify-icon icon="lucide:list" class="text-xl"></iconify-icon>
      <span class="text-[10px] font-medium uppercase tracking-tighter">Ledger</span>
      <span class="absolute top-2 right-1/4 w-1.5 h-1.5 bg-destructive rounded-full border border-white"></span>
    </button>
    <!-- FAB -->
    <div class="flex-1 flex justify-center -translate-y-6">
      <button class="w-14 h-14 bg-primary text-primary-foreground rounded-2xl flex items-center justify-center shadow-lg shadow-primary/30 border-4 border-background active:scale-95 transition-transform">
        <iconify-icon icon="lucide:plus" class="text-2xl"></iconify-icon>
      </button>
    </div>
    <button class="flex-1 flex flex-col items-center gap-1 py-2 text-muted-foreground">
      <iconify-icon icon="lucide:chart-bar" class="text-xl"></iconify-icon>
      <span class="text-[10px] font-medium uppercase tracking-tighter">Insights</span>
    </button>
    <button class="flex-1 flex flex-col items-

Source: niklasvh/html2canvas

View original on GitHubView discussion on GitHub