DEV Community

Cover image for One Mistake I Made With Tailwind CSS That Cost Me 140KB
Nick Bull
Nick Bull

Posted on • Updated on • Originally published at


One Mistake I Made With Tailwind CSS That Cost Me 140KB

Here's how things went down:

  1. I finished developing a CSS game (Flex Box Adventure) using Gatsby.
  2. Deployed it to Netlify.
  3. Shared it with folks on Twitter and said, “Share your feedback with me.”
  4. Went to sleep.
  5. Woke up.
  6. Opened Twitter DMs.
  7. Saw this message:

  8. Surprised because how two small static HTML web pages can slow down the website's loading speed.

  9. Decided to check it out.

  10. Opened Google Chrome.

  11. Typed the website url in the search bar.

  12. Pressed “Enter.”

  13. Waited for the website to load.

  14. Opened Google Chrome dev tools.

  15. Clicked on the “Network” tab.

  16. Found that my web page weighs 156KB:

  17. Surprised X2

  18. Opened the source code of the web page.

  19. Found 88.000 lines of CSS code:

  20. Surprised X3

  21. Asked myself, “How did I place eighty-eight thousand lines of CSS in my code?”

  22. Remembered that the only styles I imported into the App.tsx file (besides my 300 lines index.css) were Tailwind CSS.

  23. Googled, “Tailwind CSS in production.”

  24. Clicked on the first link.

  25. Found out that I forgot about purging CSS.

  26. Opened tailwind.config.js

  27. Added Tailwind purge rules:

  28. Re-deployed the website to Netlify.

  29. Opened Google Chrome dev tools once again.

  30. Found that my website weights ≈18KB now:

  31. Surprised X4

  32. Felt happy.

Lessons Learned By Me

What have I learned from this situation:

  1. Users are the best testers.
  2. Never go to sleep after sharing your first version of the product.

One Lesson For You

In fact, nothing critical happened. Only one person pointed to the website loading speed, out of 40+ others who gave me feedback about the game.

What does it say to us?

You can spend time building your product until it becomes perfect, then test it for months and, without fear, release it to the public.

Or you can stop wasting your precious time on seeking perfection and unnecessary pre-optimization and release your product as soon as you have built an MVP (minimum viable product)

Just remember one thing, 40 users in one day can improve your product more (giving ideas and feedback) than you, building it alone in a few months.

In the End…

If you like this article share it with your colleges or friends and check me on Twitter.

📌 Every week, I send out a “3-2-1” newsletter with 3 tech news, 2 articles, and 1 advice for you. Join my 3-2-1 newsletter here.

Top comments (5)

soorajs98 profile image
Sooraj S

nice, thanks

roshankrsoni profile image
Roshan Kr Soni

thanks for sharing

janpauldahlke profile image
jan paul

tailwind purge, will be remembered ;-) ty for sharing this.

i member

inerds profile image
Inad Hussein

This is the kind of story I am here for. Thanks for sharing.
TBH you should never ever use tailwind in production without purging.

nickbulljs profile image
Nick Bull

I'm glad I've made this mistake early...