In my react project i use tailwind css. i have installed every package I need. When I run the project, it runs without errors. But, in every jsx file, the first line has an error. it says Unknown word (CssSyntaxError)

Here is my App.jsx file

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import Test from "./pages/Test";
import "./App.css";
import Signup from "./pages/Signup";

const router = createBrowserRouter([

  {
    path: "/",
    element: <Test />,
  },
  {
    path: "/signup",
    element: <Signup />,
  },
]);

function App() {
  return (
    <div>
      <RouterProvider router={router} />
    </div>
  );
}

export default App;

the line import { createBrowserRouter, RouterProvider } from “react-router-dom”; has a red underline under createBrowserRouter, the error is Unknown word (CssSyntaxError)

Here is my Signup.jsx file

import React from "react";

const Signup = () => (
  <section className="flex">
    <div className="w-1/2">
      <div className="container mx-auto max-w-2xl p-8 bg-white rounded-lg shadow-md">
        <h1 className="text-2xl font-bold mb-4">Create an account</h1>
        <p className="mb-6 text-gray-500">
          Already have an account?{" "}
          <a href="/login" className="text-primary-shade-1 hover:underline">
            Log in
          </a>
        </p>

        <form>
          {/* First and Last Name */}
          <div className="flex gap-4 mb-4">
            <input
              type="text"
              name="firstName"
              placeholder="First name"
              className="w-full p-2 border border-gray-300 rounded-md"
              required
            />
            <input
              type="text"
              name="lastName"
              placeholder="Last name"
              className="w-full p-2 border border-gray-300 rounded-md"
              required
            />
          </div>

          {/* Email */}
          <input
            type="email"
            name="email"
            placeholder="Email address"
            className="w-full p-2 border border-gray-300 rounded-md mb-4"
            required
          />

          {/* Contact Number */}
          <input
            type="tel"
            name="contactNumber"
            placeholder="Contact Number"
            className="w-full p-2 border border-gray-300 rounded-md mb-4"
            required
          />

          {/* Password */}
          <div className="flex gap-4 mb-4">
            <input
              name="password"
              placeholder="Password"
              className="w-full p-2 border border-gray-300 rounded-md"
              required
            />
            <input
              name="confirmPassword"
              placeholder="Confirm your password"
              className="w-full p-2 border border-gray-300 rounded-md"
              required
            />
          </div>

          <p className="text-gray-500 text-sm mb-4">
            Use 8 or more characters with a mix of letters, numbers & symbols
          </p>

          {/* Checkbox */}
          <div className="flex items-center mb-6">
            <input
              type="checkbox"
              name="showPassword"
              className="mr-2 rounded"
            />
            <label htmlFor="showPassword">Show password</label>
          </div>

          {/* Buttons */}
          <div className="flex gap-4">
            <button type="button" className="text-pink-500 hover:underline">
              Log in instead
            </button>
            <button
              type="submit"
              className="bg-pink-500 text-white py-2 px-4 rounded-md hover:bg-pink-600 w-full"
            >
              Create an account
            </button>
          </div>
        </form>
      </div>
    </div>
    <div className="bg-blue-300 w-1/2">Right Side</div>
  </section>
);

export default Signup;

the line import React from “react”; has red underlines under import React. the error is the same. Why is this. How can I fix this?

I tried every suggestion from github copilot. nothing works. all the dependencies are installed