Postcss没有从node_modules中的组件中清除顺风样式

Question

我创建了一个自定义组件作为它自己的包，它使用了 tailwind。我还在这个组件上使用了汇总来构建它（并清除未使用的顺风样式），并在该构建文件中将其样式注入头部。

我认为显示源文件或构建文件没有帮助，但为组件汇总构建的文件如下所示：

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

var css_248z = ".bg-blue-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgba(59, 130, 246, var(--tw-bg-opacity))\n}\n\n.table {\n  display: table\n}\n\n* {\n  --tw-shadow: 0 0 #0000\n}\n\n* {\n  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);\n  --tw-ring-offset-width: 0px;\n  --tw-ring-offset-color: #fff;\n  --tw-ring-color: rgba(59, 130, 246, 0.5);\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000\n}\n\n@-webkit-keyframes spin {\n  to {\n    transform: rotate(360deg)\n  }\n}\n\n@keyframes spin {\n  to {\n    transform: rotate(360deg)\n  }\n}\n\n@-webkit-keyframes ping {\n  75%, 100% {\n    transform: scale(2);\n    opacity: 0\n  }\n}\n\n@keyframes ping {\n  75%, 100% {\n    transform: scale(2);\n    opacity: 0\n  }\n}\n\n@-webkit-keyframes pulse {\n  50% {\n    opacity: .5\n  }\n}\n\n@keyframes pulse {\n  50% {\n    opacity: .5\n  }\n}\n\n@-webkit-keyframes bounce {\n  0%, 100% {\n    transform: translateY(-25%);\n    -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);\n            animation-timing-function: cubic-bezier(0.8,0,1,1)\n  }\n\n  50% {\n    transform: none;\n    -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);\n            animation-timing-function: cubic-bezier(0,0,0.2,1)\n  }\n}\n\n@keyframes bounce {\n  0%, 100% {\n    transform: translateY(-25%);\n    -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);\n            animation-timing-function: cubic-bezier(0.8,0,1,1)\n  }\n\n  50% {\n    transform: none;\n    -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);\n            animation-timing-function: cubic-bezier(0,0,0.2,1)\n  }\n}\n\n@media (min-width: 640px) {\n}\n\n@media (min-width: 768px) {\n}\n\n@media (min-width: 1024px) {\n}\n\n@media (min-width: 1280px) {\n}\n\n@media (min-width: 1536px) {\n}";
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;

我没有放整个文件内容，因为它是很多样板文件，但styleInject 只是创建了一个样式标记并将 css 放入其中并将其附加到页面的头部。现在在我的 gatsby 应用程序中，我将它导入到一个组件中，但我还添加了一些自定义样式，如下所示：

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>
    )
};

我在 gatsby 中使用 postcss 插件，我的 tailwind.config.js 插件设置如下：

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: [],
}

现在，当我运行 gatsby develop 时，它会将组件样式放入样式标记中，但在 app.css 中它仍然重新定义 .bg-blue-500。我不确定我做错了什么，但它应该删除.bg-blue-500 的一个实例。

Answer 1

默认情况下，PostCSS 和 Tailwind 似乎只适用于生产环境 (gatsby build)。来自Gatsby's documentation：

注意：默认情况下，PurgeCSS 仅在 build 命令上运行，因为它是 相对缓慢的过程。开发服务器将包括所有 Tailwind 类，因此强烈建议您在构建上进行测试 部署前的服务器。

来自Tailwind docs：

我们建议只删除生产中未使用的样式，因为删除 它们在开发中意味着您需要在任何更改时重新编译 您的模板和启用 PurgeCSS 的编译速度要慢得多。

您可以尝试通过以下方式更改默认行为：

// 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
  }
}

来源：https://dev.to/mrpbennett/getting-setup-with-tailwind-gatsby-42c