Webpack Shopify Slate的网页包和Tailwindcss问题

我正在使用Shopify Slate 1.0.0-beta.19构建一个带有Tailwindcss和Webpack的定制Shopify主题

出于某种原因，当我运行slate build时，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')
          }
        ]
      },
    },
  };

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

postss.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')
          }
        ]
      },
    },
  };

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

输出的CSS文件：

这就是运行slate deploy后生成的内容

这件事让我摸不着头脑，所以任何帮助都将不胜感激

谢谢