Closed kcubero27 closed 4 years ago
I would love to know if there is the opportunity to contribute to this task. In the same way, I would like you to give me some guidelines to do so 👍
Hey @karencubero , a contribution to add this parameter would be more than welcome. It would actually be awesome. I would love to add an example with tailwindcss in this repo ❤
I've tried to add extractors but seems that doesn't work:
[
{
extractor: class {
static extract(content) {
return content.match(/[A-Za-z0-9-_:\/]+/g) || [];
}
},
extensions: ['js', 'ts', 'jsx', 'tsx']
},
...extractors
];
I have as well tried to implement it without next-css (using PostCSS) but doesn't work either: https://tailwindcss.com/docs/controlling-file-size/
Any ideas?
I was facing the same issue and found a workaround by using ignore comments
/* purgecss start ignore */
@tailwind base;
/* purgecss end ignore */
I wasn't contemplating that solution, but at least is a fix and it will work. Thanks! @stefanbuck
In this file (gatsby-node.js
) of gatsby-plugin-purgecss
, the plugin included a whitelist
option for PurgeCSS of ['html', 'body']
. This seems to also solve the problem. But then again, Tailwind base is essentially Normalize.css which is tiny, so ignoring it with @stefanbuck is probably safer.
Example of Next.js + Tailwind with purgecss here: https://github.com/zeit/next.js/blob/canary/examples/with-tailwindcss/postcss.config.js
I guess this task can be closed! Thanks @timneutkens
Description When installing TailwindCSS and next-purgecss, some styles got removed because they are not classes. By default, TailwindCSS adds classes for span and other similar HTML tags without a class.
Expected outcome If I have a span in my page, next-purgecss should not remove styles that affect this span. However, it should be intelligent enough in order to remove styles that affect paragraphs or headers.
Idea Currently, Gatsby has a plugin called gatsby-plugin-purgecss which has a special option called tailwind:
Demo: NextJS and Gastby