Strange output when building Tailwind through PostCSS (Laravel Mix) - laravel

Question

I'm using Laravel Mix and PostCSS to build Tailwind.
Everything works, I can even Purge unused styles.
I have strange outputs when I build (a LOT of these) :
--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: '-'
}
]
I'm using the latest TailwindCSS version.
Here is the relevant part of my 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'),
]);
I don't even know where to start. I don't know what's causing this.
Any lead will be appreciated!
I can remove the output by disabling this core plugins (in my tailwind.config.js) :
module.exports = {
corePlugins: {
space: false,
ringWidth: false,
ringColor: false,
ringOffsetWidth: false,
ringOffsetColor: false,
ringOpacity: false,
divideOpacity: false,
divideColor: false,
divideWidth: false,
}
}
Even more strange : if I only disable "space", the output changes from the one above to the same thing but with --tw-ring-width-reverse, as if the last plugin used produces the output...

Answer 1

I'm not sure if that helps, but I will show you my config that seems to be working fine (using Sass), I removed some irrelevant parts.
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";
and finally 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'),
],
};
When I run nom run dev everything seems to be fine, there is no output like you showed but I have things like this:
.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));
}
Obviously later only those that are really used in blade/js files are in final file when I run npm run prod

Answer 2

The problem has been solved by ugrapding Laravel Mix to the latest version.