A simple trick to check how much Tailwind impacts the HTML size
Cezary Tomczyk
Posted on September 21, 2023
Follow these steps.
- Go to any page that uses Tailwind.
- Open the developer console.
- Execute code
new Blob([document.documentElement.outerHTML]);. Notice the returned number. It represents approximately the HTML size. - Execute code
Array.from(document.getElementsByTagName('*')).forEach((el) => { el.className = ''; }). This removes all CSS classes. - 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.
💖 💪 🙅 🚩
Cezary Tomczyk
Posted on September 21, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
