I’m working on a Vite project where I am using Tailwind CSS, and I’ve deleted the App.css file to replace it with Tailwind’s utility classes. However, I’m getting the following error:
Failed to resolve import "./App.css" from "src/App.jsx". Does the file exist?
My App.jsx file no longer imports App.css and contains:
import React from 'react';
const App = () => {
return (
<div>App</div>
);
};
export default App;
I deleted App.css because I am not using it anymore, and I want to rely solely on Tailwind CSS for styling.
However, after deleting the App.css file, I am still getting the error about it trying to resolve ./App.css from App.jsx.
I have ensured that no other files are still referencing App.css.
I confirmed that Tailwind CSS is properly set up and working in my project.
The project runs fine when I revert to the old setup where App.css was present, but the error reappears after deleting App.css.
tailwind.config.js contains:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./index.html", // Path to HTML files
"./src/**/*.{js,jsx,ts,tsx}", // Path to JS/JSX/TS/TSX files
],
theme: {
extend: {},
},
plugins: [],
};
main.jsx contains:
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
createRoot(document.getElementById('root')).render(
<StrictMode>
<App />
</StrictMode>,
)
I was following the setup from a youtube tutorial https://www.youtube.com/watch?v=zA9r5zTllx4 timestamp 00:03:48
Any help would be appreciated! Thanks in advance!