gatsby - Postcss not purging taildwind style from component in node_modules

Question

I've created a custom component as its own package which uses tailwind. I've also used rollup on this component to build it (and purge unused tailwind style) and in that built file it injects the its style into the head.

I don't think it helps to show the source file or build files, but the file that rollup builds for the component looks like:

node_modules/@custom/dist/component-text.esm.js

var css_248z = ".bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgba(59, 130, 246, var(--tw-bg-opacity))
}

.table {
  display: table
}

* {
  --tw-shadow: 0 0 #0000
}

* {
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(59, 130, 246, 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000
}

@-webkit-keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

@-webkit-keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0
  }
}

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0
  }
}

@-webkit-keyframes pulse {
  50% {
    opacity: .5
  }
}

@keyframes pulse {
  50% {
    opacity: .5
  }
}

@-webkit-keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);
            animation-timing-function: cubic-bezier(0.8,0,1,1)
  }

  50% {
    transform: none;
    -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);
            animation-timing-function: cubic-bezier(0,0,0.2,1)
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);
            animation-timing-function: cubic-bezier(0.8,0,1,1)
  }

  50% {
    transform: none;
    -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);
            animation-timing-function: cubic-bezier(0,0,0.2,1)
  }
}

@media (min-width: 640px) {
}

@media (min-width: 768px) {
}

@media (min-width: 1024px) {
}

@media (min-width: 1280px) {
}

@media (min-width: 1536px) {
}";
styleInject(css_248z);

var Text = function Text(_ref) {
  var children = _ref.children,
      large = _ref.large;

  if (large) {
    return /*#__PURE__*/React__default['default'].createElement("h1", {
      className: "bg-blue-500"
    }, children);
  }

  return /*#__PURE__*/React__default['default'].createElement("p", {
    className: "bg-blue-500"
  }, children);
};

exports.Text = Text;

I didn't put the entire file contents as it's alot of boilerplate but styleInject just creates a style tag and puts the css into it and attaches that to the head of the page. Now in my gatsby app, I import this into a component but I also add some custom styling like so:

my-component.tsx

import React from 'react';
import PropTypes from 'prop-types';
import { Text } from '@custom/component-text';

const paragraph = () => {
    return (
        <div>
            <Text>Test</Text>
            <p className="bg-blue-500">Testing</p>
        </div>
    )
};

I am using the postcss plugin in gatsby and I have my tailwind.config.js plugin setup like this:

tailwind.config.js

module.exports = {
  purge: {
    enabled: true,
    content: [
      './src/**/*.{js,jsx,ts,tsx}',
      './node_modules/@custom/**/*.{js,jsx,ts,tsx}',
    ],
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Now when I run gatsby develop, it puts the components style into a style tag but also in app.css it still redefines .bg-blue-500. I'm not sure what I'm doing wrong but it should remove one instance of the .bg-blue-500.

Answer 1

PostCSS plus Tailwind seems to only works in production (gatsby build) by default. From Gatsby's documentation:

Note: By default, PurgeCSS only runs on the build command as it is a relatively slow process. The development server will include all Tailwind classes, so it’s highly recommended you test on a build server before deploying.

And from Tailwind docs:

We recommend only removing unused styles in production, as removing them in development means you need to recompile any time you change your templates and compiling with PurgeCSS enabled is much slower.

You can try to change the defaults behavior by:

// gatsby-config.js
{
 resolve: 'gatsby-plugin-postcss',
    options: {
        postCssPlugins: [require('tailwindcss')('./tailwind.config.js')],
     },
 },
 {
  resolve: `gatsby-plugin-purgecss`,
  options: { 
    tailwind: true,
    develop: true // add this if needed
  }
}

Source: https://dev.to/mrpbennett/getting-setup-with-tailwind-gatsby-42c