Is there a way to delay when Tailwind purges unused CSS classes when running the gatsby build command? Based on what I’m seeing, it seems like my CSS classes are being purged before page data is retrieved and used in my components in createPages. As an example, one of my model options is to configure how many items should show in a row and I use that value in a template literal to get a class like grid-cols-3 (actually md:grid-cols-3 as grid-cols-1 is used on mobile). I’ve used Tailwind in Angular apps and completely understand why string concatenation for class names doesn’t work there as the class wouldn’t be known until runtime. But with Gatsby, I would expect my content to be retrieved, the string literal to be output as a Tailwind class, and then unused CSS classes get purged after the page is written.
My current workaround is to just run gatsby build twice. I’m assuming this works because of the cache as my grid-cols-3 would already be filled in and that class doesn’t get purged from the CSS. I know other options are to safelist class names or to write code that returns full names, but with how the html gets built, it would be nice if template literals would work.
My setup is as follows:
gatsby-browser.js imports my css file that brings in the Tailwind base/components/utilities.
gatsby-config.js has gatsby-plugin-postcss as a plugin
postcss.config.js plugins require tailwindcss and autoprefixer
tailwind.config.js has purge.content set to ['public/**/*.html', 'src/**/*.tsx']