There seems to be a strange behavior in my Next.js code.
I have a pages file named app/(dashboard)/journals/new/pages.js that utilizes a layout containing a sidebar and a main section. Within this pages file, I am attempting to style the content section, which is passed as a child to the layout component by Next.js.
The issue arises when I try to apply styles to this specific page - the styles do not take effect. However, if I copy the component along with the styles to the layout.tsx page, save it, and then remove it, the styles from the pages.jsx file stick. In essence, Next.js only recognizes styles that are copied to the layout.tsx file. This behavior does not occur with other components or pages. Any insights on this?
// app/(dashboard)/journals/new/pages.tsx
import {
ResizableHandle,
ResizablePanel,
ResizablePanelGroup,
} from "@/components/ui/resizable";
const NewJournal = () => {
return (
<div className="w-full min-h-screen flex flex-col">
<div className='text-3xl text-blue-900 h-36 bg-red-400'>testing</div>
<div className="w-full">
<ResizablePanelGroup
direction="horizontal"
className="w-full rounded-lg border"
autoSaveId='maistoria-panel'
>
<ResizablePanel defaultSize={80}>
<div className="flex h-[200px] items-center justify-center p-6">
<span className="font-semibold">One</span>
</div>
</ResizablePanel>
<ResizableHandle />
<ResizablePanel defaultSize={20}>
<div className="flex h-[200px] items-center justify-center p-6">
<span className="font-semibold bg-red-950 m-4">One</span>
</div>
</ResizablePanel>
</ResizablePanelGroup>
</div>
</div>
);
};
export default NewJournal;
// app/(dashboard)/layout.tsx
"use client"
import MobileSidebar from '@/components/dashboard/MobileSidebar';
import Sidebar from '@/components/dashboard/Sidebar';
import Logo from '@/components/logo';
const DashboardLayout = ({ children }: { children: React.ReactNode }) => {
return (
<main className='flex'>
<Sidebar />
<div className="md:hidden">
<MobileSidebar />
</div>
<section className='w-full min-h-screen'>
{children}
</section>
</main>
)
}
export default DashboardLayout;
import type { Config } from "tailwindcss"
const config = {
darkMode: ["class"],
content: [
'./pages/**/*.{ts,tsx}',
'./components/**/*.{ts,tsx}',
'./app/**/*.{ts,tsx}',
'./src/**/*.{ts,tsx}',
],
prefix: "",
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
colors: {
border: "hsl(var(--border))",
...
// Other color configurations omitted for brevity
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
keyframes: {
"accordion-down": {
from: { height: "0" },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: "0" },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
},
},
plugins: [require("tailwindcss-animate")],
} satisfies Config
export default config
Please note: The styles seem to be applying correctly in other pages and components without any issues.