Shopify Slate的Webpack和Tailwindcss问题

Question

我正在使用Shopify Slate 1.0.0-beta.19通过Tailwindcss和Webpack构建自定义Shopify主题。

出于某种原因，当我运行slate时，tailwindcss库的某些部分不会像（容器/宽度/显示）那样输入css文件，而（边距/填充/背景色）会那样。

slate.config.js

  const webpack = require('webpack');
  const path = require('path');

  module.exports = {
    'cssVarLoader.liquidPath': ['src/snippets/css-variables.liquid'],
    'webpack.extend': {
      resolve: {
        alias: {
          jquery: path.resolve('./node_modules/jquery'),
          'lodash-es': path.resolve('./node_modules/lodash-es'),
          'vue$': path.resolve('./node_modules/vue/dist/vue.esm.js'),
        },
      },
      module: {
        rules: [
          {
            test: /\.scss$/,
              use: [
                {
                  loader: 'postcss-loader',
                  options: {
                    ident: 'postcss',
                    importLoaders: 1,
                    plugins: [
                      require('tailwindcss'),
                      require('autoprefixer'),
                    ],
                  },
                },
              ],
            include: path.resolve(__dirname, './src/styles/theme.scss')
          }
        ]
      },
    },
  };

postcss.config.js

const purgecss = require('@fullhuman/postcss-purgecss')({

  // Specify the paths to all of the template files in your project
  content: [
    './src/**/*.vue',
    './src/**/*.liquid',
    './src/**/.liquid',
    './src/*.liquid',
    './src/layout/theme.liquid',
    './src/snippets/*.liquid',
    './src/templates/*.liquid',
  ],

  // Include any special characters you're using in this regular expression
  defaultExtractor: (content) => content.match(/[\w-/:%]+(?<!:)/g) || [],
});

// eslint-disable-next-line no-undef
module.exports = {
  plugins: [
    require('tailwindcss')('./tailwind.config.js'),
    require('autoprefixer'),
    // eslint-disable-next-line no-process-env,no-undef
    ...process.env.NODE_ENV === 'production'
      ? [purgecss]
      : [],
  ],
};

theme.scss

/**
 * Tailwindcss
 */

@tailwind base;

@tailwind components;

@tailwind utilities;

输出的CSS文件：

https://cdn.shopify.com/s/files/1/0263/1411/3106/t/2/assets/layout.theme.css

这是我执行slate部署后生成的内容。

我正在为此抓挠头，因此，我们将不胜感激。

谢谢。