Empty values for variables

[xorock]

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]

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.

[xorock]

Wasn't it var(--tw-empty) before?
I just looked in an earlier project and there is:

--tw-blur: var(--tw-empty,/*!*/ /*!*/);
        --tw-brightness: var(--tw-empty,/*!*/ /*!*/);
        --tw-contrast: var(--tw-empty,/*!*/ /*!*/);
        --tw-grayscale: var(--tw-empty,/*!*/ /*!*/);

Phpstorm then treats as a valid value.

[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: ;

[dolma]

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

Hi @RobinMalfait! Thanks a lot for the insight into why it's there. Good to know it's not a bug. Phew.

That being said, even if it's not a bug it still is admittedly a hack 😅.

On that note, wouldn't using --tw-xxx: none; behave exactly like --tw-xxx: ; but be nicely supported by IDEs? Genuine question btw. I've tried playing with it a bit and so far it seems to work the exact same way as the whitespace hack (as a toggle var) but I may very well have missed sth. Any thoughts?

Added benefit of using none instead of a whitespace is that it's very obvious what it means, rather than look like an issue to the uninitiated. (and apparently to IDEs as well)

[RobinMalfait]

@dolma the none value won't really work because let's take a little deep dive:

When you use a class like blur, then we will set the --tw-blur variable, and use the other variables. This will result in:

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

This means that eventually the filter value looks like this:

filter: blur(8px);

If we used none, then the value would look like this:

filter: none;

And that's definitely not what you want, you want that blur. It just happens that one of the other values is none and therefore everything is none.

Having no space at all, like: --tw-brightness:; makes it an invalid property.
Making it an empty string like you would do in JavaScript --tw-brightness: '';, that makes it the string literal empty string. Which also would result in filter: none;

Before this, our solution was to have this value:

--tw-blur: var(--empty, /*!*/ /*!*/);

And this was just to prevent bugs in minifiers. Because, if you look closely, you will notice that there is just a space between the 2 comments, that's the behaviour we want. The reason we have /*!*/ with an ! is just so that minifiers won't remove those comments, because they are typically used for important comments that should stay. Typically this is used for licenses.

The minifier bugs have been fixed for a while now, so we cleaned it up to the actual values we want. Ofcourse ideally we want a value that represents a placeholder for nothingness, but afaik that doesn't exist in css.

[dolma]

@RobinMalfait Hmm interesting, thanks for the breakdown mate. Yeah it seems like there's really nothing to be done unfortunately. Interestingly it does seem to work for the toggle hack (at least in some cases, probably just by luck) but guess it just doesn't work as a substitute for how the whitespace hack is used in tailwind.

but I may very well have missed sth

Guess I was right about that one

[Ryongyon]

bad design patterns

[vielhuber]

I would suggest doing it the "valid" way: When we inline our css, https://validator.w3.org/ throws also errors because of this.

Why not use

--tw-blur: var(--tw-empty)

instead of

--tw-blur: var(--tw-empty,/*!*/ /*!*/);

?

Must then --tw-empty be declared beforehand and what was the value?

[ThePeterMick]

Cloudflare auto-minification is also affected by the empty values...

This below stops Cloudflare from minifying the CSS (Tailwind v3.1.3):

.ordinal {
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
}

[sethjeffery]

W3C themselves mark this as a parse error on https://validator.w3.org/
All our pages using Tailwind with inline css are being marked as invalid by W3C.