PurgeCSS purging classes that come from Prismic in my next.js app

[linkyndy]

Hey,

Tailwind works great, however I have a few classes that are coming with RichText data from Prismic. These classes are purged in my production deploys.

My question is, can I trigger purging after the pages have been built by next.js (i.e. after they have the data from Prismic)? If not, how can I solve this issue?

Thanks!

[estevanmaito]

You can control what you want to be purged: https://tailwindcss.com/docs/controlling-file-size/#setting-up-purgecss-manually

Example in the docs (would only purge utilities):

/* purgecss start ignore */
@tailwind  base;
@tailwind  components;
/* purgecss end ignore */

@tailwind  utilities;

[linkyndy]

I still want to purge everything that it's purged now, except the content coming from Prismic.

[estevanmaito]

I don't know exactly the names of the classes that Prism creates, but you could pass a whitelist to PurgeCSS.

Adapted example from the docs, would whitelist everything that start with token and children of token:

// tailwind.config.js
module.exports = {
  purge: {
    content: ['./src/**/*.html'],

    // These options are passed through directly to PurgeCSS
    options: {
      whitelistPatterns: [/^token/],
      whitelistPatternsChildren: [/^token/]
    }
  },
  // ...
}

You can read more here: https://tailwindcss.com/docs/controlling-file-size/#purgecss-options

[linkyndy]

Thanks for your answer. I saw whitelisting, and that would work with the current amount of classes/labels coming from Prismic. However, I don't expect this to be the case in the future. Is there any other way to address this?