search

FullHuman / postcss-purgecss

PostCSS plugin for purgecss
MIT License
91 stars 5 forks source link

Gatsby, Tailwind, PurgeCSS: <body> tag refuses any styling #40

Open 2x2xplz opened 4 years ago

2x2xplz commented 4 years ago

Before you open an issue, please check if a similar issue already exists or has been closed before.

Describe the bug Building a site with Gatsby. Using PurgeCSS as a PostCSS plugin after Tailwind. When PurgeCSS is active, the body tag is stripped of all styling, and the user-agent (browser) defaults to an 8px margin on all sides.

This despite having 

body {
  @apply m-0 bg-gray-300  /* tailwind syntax */
}

in my global.css file. As soon as I remove PurgeCSS from the build, everything works fine, the body margins go to zero and the background is grey.

To Reproduce

  1. Add PurgeCSS to a working site: 
    module.exports = {
plugins: [
require('tailwindcss'),
require('postcss-nesting'),
require('autoprefixer'),    
...process.env.NODE_ENV === 'production' ? [purgecss] : []
],
}
  2. gatsby build
  3. gatsby serve
  4. open browser, see lack of body styling. other styles are fine!

Expected behavior Everything else related to PurgeCSS works great. It stripped 600kb out of my bundle. But it appears the body tag is immune or incompatible or something.

Desktop (please complete the following information):

Additional context