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

如何解决Postcss没有从node_modules中的组件中清除taildwind样式

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

我认为显示源文件或构建文件无济于事，但汇总构建组件的文件如下所示：

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,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,1,1);\n            animation-timing-function: cubic-bezier(0.8,1)\n  }\n\n  50% {\n    transform: none;\n    -webkit-animation-timing-function: cubic-bezier(0,0.2,1);\n            animation-timing-function: cubic-bezier(0,1)\n  }\n}\n\n@keyframes bounce {\n  0%,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,],},darkMode: false,// or 'media' or 'class'
  theme: {
    extend: {},variants: {
    extend: {},plugins: [],}

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

解决方法

PostCSS 和 Tailwind 似乎默认只在生产环境 (gatsby build) 中有效。来自Gatsby's documentation：

注意：默认情况下，PurgeCSS 仅在构建命令上运行，因为它是一个 过程相对缓慢。开发服务器将包括所有 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