Anyone know if you can have client components in a layout? The styling for TailwindCSS only updates when I reload the layout.tsx component and doesn't work when I make the style changes in the client component alone.

I have a route /profiles/[username]

Layout component is in /profiles/[username]/layout.tsx

I have different pages in /profiles/[username]/[page names]/page.tsx

In my layout.tsx I am grabbing profile and using the data to display a header much like instagrams. Then I have tabs which route to different pages in profile such as details, posts, etc..

The tabs I originally had in layout.tsx, but I decided to export them into a ProfileNavbar.tsx and ProfileNavbarTabs.tsx client component so that I could use the usePathname hook to decide which one is an active tab and update the styles dynamically. Since the layout.tsx is a server component.

However everytime I change the tailwind css styles in ProfileTabs it doesn't update. It's very weird cause it'll update if I say text-white but not border-b-2 border-white, it also updates for border-4 border-white (so WEIRD). When I reload layout.tsx and then make the changes it works, but doesn't really work in deployment so I think it's bugging out and pretending it's working lol. Just in case there was a misunderstanding, the routing works, it’s just the styling is broke and being unpredictable. Even the background color in ProvileNavbar is not showing. However everything is formatted right, so very strange why some tailwind is working and others arent

I could always just have the tabs at the top of each page in /profiles/[username]/[page name]/page.tsx, but I figured it would be nicer if I could just call it once in layout.tsx. Anyone know what could cause this issue?


Layout.tsx

// removed imports to save texts

type Props = {
  params: {
    username: string;
  };
  children: React.ReactNode;
};

const ProfileLayout = async ({ params, children }: Props) => {
  const { username } = params;
  const currentUserWithProfile = await getCurrentUserWithProfile();
  const profile = await getUserProfileByUsername(username);

  const isUsersProfile =
    currentUserWithProfile?.profile?.username === profile?.username;

  const path = `/profiles/${username}`;

  return (
    <div className="min-h-screen h-fit w-full flex flex-col justify-start items-center">
      <div className="bg-[#32343D] w-full h-fit flex flex-col items-center gap-[23px]">
      <ProfileNavbar username={username} />
      </div>
      {children}
    </div>
  );
};

export default ProfileLayout;

Profile Navbar:

import React from "react";
import ProfileNavbarTab from "./profile-navbar-tab";

type Props = {
  username: string;
};

const ProfileNavbar = ({ username }: Props) => {
  const path = `/profiles/${username}`;
  return (
    <nav className="bg-[#44464F] w-full h-[73px] flex justify-center items-center">
      <div className="h-full w-2/3 flex justify-between items-center text-white">
        <ProfileNavbarTab title="Details" path={path} />
        <ProfileNavbarTab title="Schedule" path={`${path}/schedule`} />
        <ProfileNavbarTab
          title="Organizations"
          path={`${path}/organizations`}
        />

        <ProfileNavbarTab title="Teams" path={`${path}/teams`} />
      </div>
    </nav>
  );
};

export default ProfileNavbar;

Navbar Tabs (The component that doesn't update styles)

"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import React from "react";

type Props = {
  title: string;
  path: string;
};

const ProfileNavbarTab = ({ title, path }: Props) => {
  const pathname = usePathname();
  const active = pathname === path;
  return (
    <Link
      className={`h-full flex flex-col justify-center items-center ${
        active && "border-b-2 border-white font-extrabold"
      }`}
      href={path}
    >
      {title}
    </Link>
  );
};

export default ProfileNavbarTab;