Question

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

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

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

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

1 个答案: