PurgeCSS with Gatsby and Tailwind CSS
- Author
- Sean Keever
- Last modified
- Jun 20, 2020
- Time to read
- 1 min read
Photo by Samantha Gades
Table of Contents
Problem
The way I source articles on this site is by dangerously setting the HTML after sourcing the content from markdown files.
// article.js
function Article() {
// get markdown html data
return <article dangerouslySetInnerHTML={{ __html: html }} />;
}
I'm using Tailwind CSS to provide some base styles for the article.
@tailwind base;
/* rest of the base styles... */
blockquote {
@apply px-4 py-2 border-l border-l-blue;
}
@tailwind components;
@tailwind utilities;
When you run PurgeCSS, the PurgeCSS parser does not see any <blockquote>
elements inside your source code. It cannot infer you wrote a <blockquote>
inside your markdown file that was rendered out in article.js
.
Non-solution
In
Tailwind's docs,
they suggest putting your PurgeCSS whitelist in tailwind.config.js
.
// tailwind.config.js
module.exports = {
purge: {
content: [
'./src/**/*.html',
'./src/**/*.jsx',
'./src/**/*.tsx',
'./src/**/*.js',
'./src/**/*.ts',
],
options: {
whitelist: ['blockquote'],
},
},
// ...
};
Unfortunately, I couldn't get this approach to work when sourcing markdown files
with Gatsby. Elements produced by the dangerously setting HTML are still purged.
Feel free to revert your PurgeCSS settings in tailwind.config.js
.
// tailwind.config.js
module.exports = {
purge: [
'./src/**/*.html',
'./src/**/*.jsx',
'./src/**/*.tsx',
'./src/**/*.js',
'./src/**/*.ts',
],
// ...
};
Solution
You need to install a plugin to configure PurgeCSS.
npm i gatsby-plugin-purgecss
Then, in gatsby-config.js
:
// gatsby-config.js
module.exports = {
plugins: [
{
resolve: 'gatsby-plugin-purgecss',
options: {
tailwind: true,
whitelist: ['blockquote'],
},
},
],
};
And that's all there is to it. There are additional options you can pass into the PurgeCSS configuration. I will refer you to the documentation for that. This, however, should be the minimum to get you set up so that PurgeCSS doesn't purge selectors you want to keep.
- Author
- Sean Keever
- Last modified
- Jun 20, 2020
- Time to read
- 1 min read