React styling problem with tailwindcss framework؟ - css

Question

my name is Daniel Asa. I have a React project. I am creating it using React with a CSS framework called tailwindcss. I ran the React project, but the changes I made in the first part of the project are not applied, if the codes themselves I changed the React and deleted the src folder of the React, the code is executed and the changes are not applied, there is also an error in the browser section, but it has nothing to do with what it is.
The codes are below:
index.js
import React from "react";`
import ReactDOM from "react-dom";`
import App from "./App";`
import './index.css';`
ReactDOM.render(`
<React.StrictMode>`
<App />
</React.StrictMode>`
, document.getElementById("root"));
This is the new src folder codes^
And the following codes are index .css codes:
#tailwind base;
#tailwind components;
#tailwind utilities;
And the codes below are App.js codes:
import React from 'react';
function App() {
return (
<div className='w-screen h-screen bg-blue-400 flex justify-center items-center text-base font-bold'>
App
</div>
);
}
export default App
and right-clicked in the browser section and clicked the inspect option and entered the console section and this error:
react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot
printWarning # react-dom.development.js:86
When I got into the links it was
Function.prototype.apply.call(console[level], console, argsWithFormat);
And above it is a multiplication sign that gives this message:
Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot
I translated it well myself, I understood that I used createRoot instead of render, but it still didn't work
And after I saw the error again in the browser it gave this:
Warning: You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client".
And I did this:
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import './index.css';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
But this time, not only the error was not given, the changes were not implemented.
Please, if anyone knows, help, thanks☻☻☺♥
I repeated several times, I changed the css codes, but still nothing. I saw some articles from the main site and some videos from YouTube about the css framework, but it didn't work.