resolveConfig not respecting PurgeCSS rules

[strewhella]

I've just started a new project using Tailwind (great tool!). I was inspecting bundle sizes of a fresh Create React App install with Tailwind and finding that importing the config into my JS (https://tailwindcss.com/docs/configuration#referencing-in-java-script) with resolveConfig contributed 58.31KB of JavaScript, even with PurgeCSS configured and all but 1 class stripped out.

This is mostly lodash it seems, so I worked around this by writing out the theme into a separate JSON file. However, this JSON file writes out the entire theme, not the purged version following the PurgeCSS rules. Is it possible to also purge this JS version of the theme?

[simonswiss]

Hey @strewhella 👋

Are you able to create a little minimal GitHub repo where you can demonstrate this problem, so we can have a look at it?

[strewhella]

Hi @simonswiss, I've setup a minimal example here: https://github.com/strewhella/tailwindcss-resolveconfig-demo

npm run build-tailwind-js will output the JSON of the JS version of the theme config -- outputs the entire theme without purging
npm run build-tailwind-css outputs the CSS including purging everything but bg-green-100 (though I note it still includes animations and some responsive utils)

The expectation is that tailwind-theme.json would only contain:

{
  "colors": {
    "green": {
      "100": "#f0fff4"
    }
  }
}

[adamwathan]

PurgeCSS is for purging your CSS files, not your Tailwind config. Your resolved config will always be the complete resolved config, which is intentional. I recommend using a project like babel-preval to flatten the config at build time and avoid pulling in lodash and stuff, that’s what we do in our own projects.

[krns]

Hi Adam, do you know a working project where babel-plugin-preval is configured correctly? It works in my development environment but after building assets via Laravel Mix it fails with Uncaught ReferenceError: preval is not defined

[adamwathan]

Hey! We use it successfully here: https://github.com/tailwindlabs/tailwindcss.com