PurgeCSS gotchas

#css #webdev #javascript #vue

Some time ago I bought a Tailwind UI license and I wanted to test it alongside Vue.

Following the example of someone who created a website to sell pixels from the website: http://milliondollarhomepage.com

And the "I'm Rich" app: https://en.wikipedia.org/wiki/I_Am_Rich

I came up with something funny to work on and test it. I created URList, a site to archive a limited amount of URLs that can be tagged!!! 🥳🥳🥳

I used Laravel, Laravel Forge, Vue CLI and Tailwind UI to create it and it was a wonderful experience! If you already worked with TailwindCSS you know that it offers a wonderful experience to create UIs, so you know what I'm talking about.

The first time I created a build I didn't set the PurgeCSS so I got a 3MB+ css file. Then I configured PurgeCSS and ran again and it was less than 20Kb, this is amazing!!! But when I took a look on the app, some things were broken and I didn't understand why, but it was because of the PurgeCSS somehow.

After some minutes I remembered that I had some classes that were applied dynamically using Vue, so I set these on PurgeCSS whitelist and it was all good.

I know that this is something really basic and simple, but I thought about writing about this because since I had this issue, maybe it will help someone else.