Skip to content
This repository has been archived by the owner on Feb 3, 2020. It is now read-only.

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

Open
2x2xplz opened this issue Sep 30, 2019 · 0 comments
Open

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

2x2xplz opened this issue Sep 30, 2019 · 0 comments

Comments

@2x2xplz
Copy link

2x2xplz commented Sep 30, 2019

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] : []
  ],
}
  1. gatsby build
  2. gatsby serve
  3. 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):

  • OS: Windows 10
  • postcss-purgecss v. 1.3.0
  • Gatsby version 2.15.20, Gatsby CLI version 2.7.49

Additional context
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@2x2xplz