DEV Community

Cezary Tomczyk
Cezary Tomczyk

Posted on

A simple trick to check how much Tailwind impacts the HTML size

Follow these steps.

  1. Go to any page that uses Tailwind.
  2. Open the developer console.
  3. Execute code new Blob([document.documentElement.outerHTML]);. Notice the returned number. It represents approximately the HTML size.
  4. Execute code Array.from(document.getElementsByTagName('*')).forEach((el) => { el.className = ''; }). This removes all CSS classes.
  5. Execute code new Blob([document.documentElement.outerHTML]). The number represents the HTML size after all CSS classes were removed.

Calculate how much (%) the HTML size has increased.

Top comments (0)