In my solid-js application styled with tailwindcss, I established a gray color in the index.css for the background of various screens. However, I wanted the main <App/> component to have a white background instead. To achieve this, I created an App.css file that I imported into the App.jsx, where I included the following code:
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
body::-webkit-scrollbar {
@apply w-3;
}
body::-webkit-scrollbar-thumb {
@apply bg-white rounded-full;
}
}
Despite this, when I loaded my page, the <App/> component still had a gray background. So I attempted adding a bg-white class directly in the App.jsx:
function App() {
return (
<div className="bg-white">
<Suspense fallback={<WhelpsLoader />}>
...
</div>
);
}
Unfortunately, this adjustment did not apply the desired background color. Subsequently, I updated the App.css as follows:
.App {
background-color: #ffff;
}
Still, the background did not change, leaving me puzzled since I expected the CSS for the <App/> to take precedence over the index.css styling.
To troubleshoot further, I made changes in my App.jsx file by importing the App.css and using JavaScript to set the background color:
import "./App.css";
...
document.querySelector('.App').style.backgroundColor = "#fff";
function App() {
useNetworkStatus();
return (
<div class="App">
<Suspense fallback={<WhelpsLoader />}>
<AppRouter />
<Snackbars />
</Suspense>
</div>
);
}
export default App;