Empty values for variables

Tailwind version: 3.0.15

Hi. I installed a fresh project on Laravel 8 and after configuring it, I noticed that it is full of empty values. Everything else works as expected.

generated CSS:

--tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
...

My config: postcss.config.js

module.exports = {
    plugins: [
        require('postcss-import'),
        require('tailwindcss/nesting'),
        require('tailwindcss'),
        require('autoprefixer'),
    ]
}

tailwind.config.js

module.exports = {
    content: [
        './storage/framework/views/*.php',
        './resources/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.vue',
    ],
    darkMode: 'media', // or 'media' or 'class'
    theme: {
        fontFamily: {
            sans: ['Verdana', 'Arial', 'Helvetica', 'sans-serif'],
            serif: ['serif'],
        },
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
    corePlugins: {
        preflight: true,
    },
}

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css')
    .options({
        processCssUrls: false,
    });

app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

[RobinMalfait]

Yep, it was var(--tw-empty,/*!*/ /*!*/); before because minifiers incorrectly minified var(--tw-empty, ) as var(--tw-empty,) (notice the space) which makes it invalid. So we applied this hack to make as many minifiers as possible empty. What you will notice is that there is still a space between the two /*!*/. The reason we have a ! in there is because normal comments are removed by minifiers.

Long story short, --tw-blur: var(--tw-empty,/*!*/ /*!*/); is a fancy/over-complex version of --tw-blur: ;

[RobinMalfait]

Hey! Thank you for your question! Much appreciated! 🙏

This is by design and not a bug. It is a bug in your IDE for incorrectly thinking that it is a bug.

These empty values are defaults and we use them in different places. If we don’t have them and you use one of those variables then the variable is “undefined” and the css would be broken.

We have some utilities that override these values so that they actually do something. For example try to use “rotate-45” and look at the generated css.

If you build your css then you should see that everything should work as expected.