Skip to content

DEV Community

Cezary Tomczyk

Posted on Sep 21, 2023

1

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

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.

Top comments (0)

Subscribe

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

Read next

Working on mulitple braches at once using git worktree

Shubham Kumar - Mar 2

Langflow: Build Powerful AI Apps with Drag-and-Drop Simplicity

GitHubOpenSource - Mar 2

Docker Networking

Aviral Srivastava - Mar 2

AI System Detects Offensive Memes with 85% Accuracy in Singapore's Cultural Context

Mike Young - Mar 2