npm node react 和 tauri 的错误

Question

ERROR in ./src/index.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/index.css)

Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: Unexpected "(" found.
   at C:\Users\zahin\Documents\tauri-app\src\index.css:16:5
   at Root._error (C:\Users\zahin\Documents\tauri-app\node_modules\postcss-selector-parser\dist\parser.js:174:16)
   at Root.error (C:\Users\zahin\Documents\tauri-app\node_modules\postcss-selector-parser\dist\selectors\root.js:43:19)
   at Parser.error (C:\Users\zahin\Documents\tauri-app\node_modules\postcss-selector-parser\dist\parser.js:740:21)
   at Parser.attribute (C:\Users\zahin\Documents\tauri-app\node_modules\postcss-selector-parser\dist\parser.js:454:23)
   at Parser.parse (C:\Users\zahin\Documents\tauri-app\node_modules\postcss-selector-parser\dist\parser.js:1073:14)
   at Parser.loop (C:\Users\zahin\Documents\tauri-app\node_modules\postcss-selector-parser\dist\parser.js:1043:12)
   at new Parser (C:\Users\zahin\Documents\tauri-app\node_modules\postcss-selector-parser\dist\parser.js:164:10)
   at Processor._root (C:\Users\zahin\Documents\tauri-app\node_modules\postcss-selector-parser\dist\processor.js:53:18)
   at Processor._runSync (C:\Users\zahin\Documents\tauri-app\node_modules\postcss-selector-parser\dist\processor.js:100:21)
   at Processor.processSync (C:\Users\zahin\Documents\tauri-app\node_modules\postcss-selector-parser\dist\processor.js:197:23)

I'm getting a problem here idk how to fix it. could anyone help? I have been getting this error lately and not sure about how to fix idk but here's my css code:- here's my index.css code for a better context:- Please help me out, thanks.

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


@layer base {
  * {
    @apply m-0 p-0 ;
  }
  html {
    @apply text-xl;
  }
  body {
    @apply bg-[url('./img/bg.jpg')] bg-cover bg-no-repeat ;
  }
  header{
    @apply h-screen bg-cover bg-center;
  }
  ul{
    @apply float-right list-none mt-0.5 ;
  }
  ul li{
    @apply inline-block
  }
  ul li a{
    @apply text-white no-underline py-2.5 px-6 border border-solid border-transparent ease-in-out duration-300;  ;
  }
  ul li a:hover{
    @apply bg-white text-black;
  }
  ul li.active a{
    @apply bg-white text-black;
  }
}

Answer 1

okay seems like i found a solution. It seems tailwind wasn't taking the arbitrary way and i had to go to the tailwind.config.js and add the following line to theme>extend:

theme: {
    extend: {
      backgroundImage: {
          'background': "linear-gradient(to right bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(./img/bg.jpg)",
      },
   },
}