I’m simply trying to see colors or anything but when I load the test page, CSS file is not loading. I’ve followed various fixes suggested here, but none have been successful. I’m using the latest version of Next.js, and I’ve even deleted the .next folder and rebuilt it, but it still isn’t functioning.
I’m testing this on a simple page because it’s not working in my main app.
I’ve tried CSS using:
@tailwind base;
@tailwind components;
@tailwind utilities;
and:
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
File paths:
-
apptest.tsx
-
appglobals.css
My layout.tsx code:
"use client"; // Enable Client Component behavior
import { SessionProvider } from "next-auth/react";
import "./globals.css"; // Ensure this path is correct
export default function RootLayout({ children }) {
return (
<html lang="en">
<head>
<title>Your App Title</title>
<meta name="description" content="Your App Description" />
</head>
<body className="bg-gray-100">{children}</body>
</html>
);
}
postcss.config.js:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
tailwind.config.js:
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
"./features/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
};
test.tsx test page:
// pages/test.tsx
const TestPage = () => {
return (
<div className="min-h-screen flex items-center justify-center bg-gray-100">
<h1 className="text-4xl font-bold text-blue-500">Tailwind CSS is Working!</h1>
<p className="mt-4 text-gray-700">This is a test page.</p>
</div>
);
};
export default TestPage;
You are mixing next 12 and next 13+ syntax.
- Remove “use client” from layout.tsx
- Move
/pages/test.tsxto/app/test/page.tsx