通过 PostCSS 构建 Tailwind 时出现奇怪的输出 (Laravel Mix)

Question

我正在使用 Laravel Mix 和 PostCSS 构建 Tailwind。

一切正常，我什至可以清除未使用的样式。

我构建时有奇怪的输出（其中很多）：

--tw-space-y-reverse [
   {
     index: 40,
     token: '-',
     type: 9,
     eval: [Function: sub],
     precedence: 1,
     show: '-'
   },
   {
     index: 40,
     token: '-',
     type: 9,
     eval: [Function: sub],
     precedence: 1,
     show: '-'
   }
]

我使用的是最新的 TailwindCSS 版本。这是我的 webpack.mix.js 的相关部分：

const mix = require('laravel-mix');
require('laravel-mix-purgecss');

let tailwindcss = require('tailwindcss');
mix.postCss('resources/css/tailwind.css', 'public/css/soumettre202101.css', [
  tailwindcss('./tailwind.config.js'),
]);

我什至不知道从哪里开始。我不知道是什么原因造成的。

如有线索，我们将不胜感激！

我可以通过禁用这个核心插件来删除输出（在我的 tailwind.config.js 中）：

module.exports = {
  corePlugins: {
    space: false,
    ringWidth: false,
    ringColor: false,
    ringOffsetWidth: false,
    ringOffsetColor: false,
    ringOpacity: false,
    divideOpacity: false,
    divideColor: false,
    divideWidth: false,
  }
}

更奇怪：如果我只禁用“space”，输出会从上面的那个变成同样的东西，但是使用了--tw-ring-width-reverse，就像上次使用的插件一样产生输出...

Answer 1

我不确定这是否有帮助，但我会向您展示我的配置似乎工作正常（使用 Sass），我删除了一些不相关的部分。

webpack.mix.js

const mix = require('laravel-mix');

const tailwindcss = require('tailwindcss');

mix.sass('resources/sass/tailwind.scss', 'public/css')
    .options({
        processCssUrls: false,
        postCss: [ tailwindcss('./resources/tailwind.config.js') ],
    })
    .version();

tailwind.scss

@import "~tailwindcss/base";

@import "~tailwindcss/components";

@import "~tailwindcss/utilities";

最后是tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme');
const colors = require('tailwindcss/colors');

module.exports = {
  purge: {
      content: [
          './resources/views/**/*.blade.php',
          './resources/js/**/*.js',
      ],
      defaultExtractor: content => content.match(/[\w-/.:]+(?<!:)/g) || []
  },
  theme: {
    extend: {
        fontFamily: {
            sans: ['Inter var', ...defaultTheme.fontFamily.sans],
        },
        colors: {
            // some custom colors
            gray: colors.trueGray,
            indigo: colors.indigo,
            red: colors.rose,
            yellow: colors.amber,
            bluegray: colors.blueGray,
            orange: colors.amber,
            teal: colors.teal,
            pink: colors.pink,
            green: colors.green,
        },
    },
  },
  variants: {
     gridColumn: ['responsive', 'hover'],
     gridColumnStart: ['responsive', 'hover'],
     gridColumnEnd: ['responsive', 'hover'],
  },
  plugins: [
      require('tailwindcss'),
      require('autoprefixer'),
      require('@tailwindcss/forms'),
      require('@tailwindcss/typography'),
      require('@tailwindcss/aspect-ratio'),
  ],
};

当我运行 nom run dev 一切似乎都很好，没有像你显示的输出，但我有这样的事情：

.space-y-11 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(2.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2.75rem * var(--tw-space-y-reverse));
}

很明显，当我运行 npm run prod

时，只有那些真正在 blade/js 文件中使用的才会出现在最终文件中

Answer 2

问题已解决Laravel混入最新版本

通过 PostCSS 构建 Tailwind 时出现奇怪的输出 (Laravel Mix)

Strange output when building Tailwind through PostCSS (Laravel Mix)

laravel

postcss

laravel-mix

tailwind-css