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

Posted 2023-03-07

【中文标题】通过 PostCSS (Laravel Mix) 构建 Tailwind 时的奇怪输出

【英文标题】：Strange output when building Tailwind through PostCSS (Laravel Mix)

【发布时间】：2021-04-20 11:50:15

【问题描述】：

我正在使用 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,
  

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

【问题讨论】：

这github.com/spatie/… 有帮助吗？

很遗憾，不，我们已经在使用它了。

不，我的意思是，这个插件的特定配置与 PostCSS 一起使用。我将 Laravel+Tailwind 与 postcss 一起使用，但从未遇到过这样的问题。我看到的唯一区别 - 我没有使用 laravel-mix-purgecss 进行清除，所以我的猜测是它的配置有问题

【参考方案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文件中使用的文件才会出现在最终文件中

【参考方案2】：

通过升级 Laravel Mix 到最新版本解决了这个问题。