A simple trick to check how much Tailwind impacts on 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.

array check code css developer document foreach go to html impacts simple trick