unrecognized input error while building tailwind with customize-cra-less-loader in react tsx

Question

I am trying to use tailwind with less support. I have used customize-cra for webpack and customize-cra-less-loader to load less in my react app. Everything is working fine except the generated tailwind.output.css. It has some css properties with empty values.

my config-overrides.js is:

const { override, addPostcssPlugins } = require("customize-cra");
const addLessLoader = require("customize-cra-less-loader");

 module.exports = override(
  addLessLoader({
  cssLoaderOptions: {
  sourceMap: true,
  modules: {
    localIdentName: "[hash:base64:8]",
  },
},
lessLoaderOptions: {
  lessOptions: {
    strictMath: true,
  },
},
}),
addPostcssPlugins([require("tailwindcss"), require("autoprefixer")])
 );

Everything is working fine except the generated tailwind.output.css. The tailwind.output.css has some unrecognized input errors:

   tailwind.output.css. 
--tw-blur: ;
 --tw-brightness: ;
 --tw-contrast: ;
 --tw-grayscale: ;
 --tw-hue-rotate: ;
 --tw-invert: ;
 --tw-saturate: ;
 --tw-sepia: ;
 --tw-drop-shadow: ;

as you can see all these css properties has empty values which is unrecognizable. error while running the project

/src/tailwind.output.css (../../node_modules/css-loader/dist/cjs.js?? 
ruleSet[1].rules[1].oneOf[9].use[1]!../../node_modules/postcss-loader/dist/cjs.js?? 
ruleSet[1].rules[1].oneOf[9].use[2]!../../node_modules/less-loader/dist/cjs.js?? 
ruleSet[1].rules[1].oneOf[9].use[3]!./src/tailwind.output.css)
Module build failed (from ../../node_modules/less-loader/dist/cjs.js):


--tw-scale-y: 1;
--tw-pan-x:  ;
         ^
Unrecognised input
  Error in C:\Users\PCF\Documents\GitHub\Aurthur2.0\packages\web\src\tailwind.output.css 
(line 432, column 15)

my App.less is:

@import "~antd/dist/antd.css";
@import "./tailwind.output.css";

.App {
 text-align: center;
}

.App-logo {
 height: 40vmin;
 pointer-events: none;
 }

 @media (prefers-reduced-motion: no-preference) {
 .App-logo {
   animation: App-logo-spin infinite 20s linear;
 }
 }

 .App-header {
  min-height: 100vh;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 font-size: calc(10px + 2vmin);
 color: white;
 }

 .App-link {
  color: #61dafb;
  }

 .Content {
  background-color: rgb(7, 155, 69);
  font-size: 12px; 
   }

   @keyframes App-logo-spin {
   from {
   transform: rotate(0deg);
   }
  to {
    transform: rotate(360deg);
   }  
   }  

Answer 1

My experience is that these 'errors' can be safely ignored. I have the same issue and my IDE (GoLand) complains, but it does not (in my experience) break anything.

Here is what is generated for me:

    *, ::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:  ;
}