Incorrect css generated by tailwind CLI

[darthtechworker]

Context: I am building a Node.JS project using Express, Tailwindcss and EJS.

I am building my tailwind css like so:
npx tailwindcss -i source.css -o public/stylesheets/style.css --watch

source.css:

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

This is the part of the output/style.css file that is generating the error:

*, ::before, ::after {
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --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:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}

Verified that it is wrong/incorrect syntax css using csslint

My IDE (intellij) gives an error: Term expected.

This is not causing any issues in the project, but I am concerned why is tailwind generating incorrect css. I am no css expert, but please leow if this is expected. Let me know if more info is needed.

Related stackoverflow post

[nvegater]

Im having the same issue with sveltekit

[adamwathan]

Hey! I don't see any invalid CSS in there. It's common for linters to complain about stuff like this:

--tw-backdrop-sepia:  ;

...but that is totally valid and in the spec — that's how you set a CSS variable to an empty value.

[iseries]

+bump

[ppemond-bkom]

+bump, preventing the site for validating W3C test

[crswll]

1. It keeps it composable. If the classes only set a single value for filter they wouldn't be needed, but since you can do things like backdrop-blur-sm backdrop-hue-rotate-60 they are. You can see why they're needed here by commenting out a single variable that's not being used: https://play.tailwindcss.com/GhF2IEG3bB?file=css

2. An empty value is not the same as nothing. You can disable plugins you aren't using to remove (most of) the empty ones but of course you'd lose that functionality: https://play.tailwindcss.com/Tsf46kscEt?file=config

[alphawebgroup]

+bump

[ThePeterMick]

Hey! I don't see any invalid CSS in there. It's common for linters to complain about stuff like this:

--tw-backdrop-sepia:  ;

...but that is totally valid and in the spec — that's how you set a CSS variable to an empty value.

@adamwathan Cloudflare auto-minifaction seems to be affected by the empty values, it must be failing their linter and end up not minified :(

In this article https://support.cloudflare.com/hc/en-us/articles/200169876-Why-isn-t-Auto-Minify-working- they suggest using https://jigsaw.w3.org/css-validator/ to validate

[mattemoore]

This causes an issue when linking tailwind output to .less file which may seem weird but what MS needs you to do when building custom viz in Power BI. https://docs.microsoft.com/en-us/power-bi/developer/visuals/adding-external-libraries#css-framework

[perguth]

Still seeing that issue.