DEV Community

Cezary Tomczyk
Cezary Tomczyk

Posted on

1

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)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay