1. 17

  2. 3

    I use this with tailwindcss as per the tailwind docs and I think my css is under 2kb despite using a big framework that generates tons of classes.

    1. 2

      tailwindcss, without the purgecss or similar tool, will produce 80kb compressed css… very large. In my experience.

      So most tools chains (at least the ones I come across) use purgecss or similar to get rid of the css that was not used.

      in other words, my html, Eleventy and PebbleTemplate (.peb) files, include the whole main.css (main file generated by by tailwindcss), and then in production builds, PostCSS uses purgecss plugin and it the unused styles.

      After purgecss runs, my CSS is like yours around 2 - 3 kb compressed, very impressive. And tailwind css does media queries to reposition blocks depending on screen size – all without Javascript… so overall small size and no need for JS.

    2. 2

      I have generated sites, and don’t know what classes I’d end up using in many cases until the site has loaded.

      If I could purge css based on the generated html, that would be so cool, but because that’s outside the scope of purgecss, I simply hand write my css to be nice and minimal without postprocessing.

      1. 1

        Correct me if I’m wrong. It sounds like the cool goal is for the client to remove unneeded css after it loads the content, but doesn’t that ignore the key benefit of purging css (i.e. the server sends less bytes of css)?

        1. 1

          I should say “until the site load request has been processed by the server” and the html server side generated.