Theme "Advanced" Usage ... Under Construction.

[nelsonic]

Trying to customise the theme of our Nextra site to change the <footer> which defaults to:
"MIT 2024 © Nextra."

Reading the Footer docs: https://nextra.site/docs/docs-theme/theme-configuration#footer

export default {
  footer: {
    text: (
      <span>
        MIT {new Date().getFullYear()} ©{' '}
        <a href="https://nextra.site" target="_blank">
          Nextra
        </a>
        .
      </span>
    )
  }
}

But given that this is a <text> attribute, Nextra is still controlling the appearance in the <footer>.
This is the markup that is rendered:

What I want is to control the <footer> completely. I don't just want to update the <text> ...
So I went back to the Nextra docs to try and use a <Component> for the <footer> ... nothing. 🤷‍♂️ 😢
Googled for a bit and found: shuding/nextra#2926 (comment)

"You might have to experiment with specific css selectors" ...

He links to: https://nextra.site/docs/custom-theme#advanced-usage

Under construction ... 🚧
This is such a time-suck! 😢
I've spent waaaay too much time on this! ⏳
just want a good-looking <footer> ... is that too much to ask?! 🤷‍♂️
I tried the CSS selectors approach and it was hell 😡
I don't want to have to use 50 important! statements
to attempt to override the inline Tailwind styles ... it's horrible! 🤦‍♂️
Just going to have to leave it ugly for now. 🙈
And maybe return to this later. ⏳

[nelsonic]

Tried creating a custom component but Nextra didn't like it:

Module parse failed: Unexpected token (2:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| export default function footerComponent() {
>   return <h1>Test</h1>;
| }
|

[anuragmitra4]

After some framework fighting and looking at some source code, seems like the way to customize the footer (or any component) is to use tailwind classes with a nx- prefix.

As an example, I tried to update the project.icon component:

import { Avatar, AvatarImage } from "./components/ui/avatar";
import { Button } from "./components/ui/button";
import { ChevronDown } from "lucide-react";

const config = {
  project: {
    link: "https://github.com/shadcn.png",
    icon: (
      <Button className="nx-flex nx-items-center">
        <Avatar className="nx-h-8 nx-h-8 nx-relative nx-flex nx-shrink-0 nx-overflow-hidden nx-rounded-full">
          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
        </Avatar>

        <p className="nx-flex nx-flex-col nx-ml-2 nx-text-left nx-text-xs sm:nx-block hidden">
          <strong className="block font-medium">Shadcn</strong>
          <span className="text-gray-500">shadcnui.com</span>
        </p>

        <ChevronDown className="nx-m-0.5 nx-h-4 nx-w-4" />
      </Button>
    ),
  },
};

export default config;

to get

[anuragmitra4]

Update: After doing some more testing, the situation is made worse by the fact that tailwind only packages the classes being used by the nextra-docs-theme package. So, if the package has never referenced nx-bg-gray-700, you will not be able to use that class using tailwind. Quite frustrating.

[nelsonic]

Beyond frustrating. Makes any customisation take way longer than it should. ⏳

[nelsonic]

Yeah, the nx- prefix for all TailwindCSS classes is a horrible choice for extensibility 🙅
makes reusing components from the "frontend" (Next.js App) extra difficult
as we have to manually add the prefix or load a second instance of Tailwind. 🙃