What is the correct way to apply custom CSS code to Nextra built in components?

[kgolubic]

The site I'm working on recently switched to Nextra . For our components, such as footer, we use Tailwind.

What should I use to change the styling of built-in Nextra components or the general look and feel of the documentation? At the moment, I'm using globals.css, but I think that there must be some other, more elegant way than using !important or targeting specific classes to get the changes that I need.

This is my first time using Netxra, Next.js and Tailwind for any project, so I would appreciate any help you can give me.

[textreme]

I believe I have a similar question. Everything (folders and file structure) is the same as cloned from github/nextra. Installed tailwindcss. tailwind.config.js and globals.css look like this [https://tailwindcss.com/docs/guides/nextjs] When testing with the test code for index.tsx, no styles have been applied. Why isn't TailwindCSS being applied?

[vshwjet]

You probably need an _app.js in your pages folder where you need to import the globals.css file.

[verbman]

Also, ensure you're globals.css file has at least one css declaration (I know right)!

Styling only worked when I added some css after the @tailwind statements.

@tailwind base;
@tailwind components;
@tailwind utilities;

body{
  text-transform: default;
}

[textreme]

@vshwjet @verbman thanks for your suggestions. wouldn't having to add _app.js negate the idea the @tailwind works out of the box with nextra? i'm wondering if there is a way to utilize tailwindcss without having to add an _app.js file. and if you need an _app.js file, what would go in the _app.js file to show all of the pages of nextra out of box?

[tomavant]

Hey @kgolubic did you find a better solution to this? It looks like you were successful in some custom theming, background color change and hover states etc.

[kgolubic]

@tomgavant, no I didn’t find another way. I managed to do all of the styling that we have needed until now.

[Southclaws]

I seem to be running into the same thing with Panda, which I believe works similarly to Tailwind (PostCSS plugin.)

My globals.css looks like this:

@layer reset, base, tokens, recipes, utilities;

body {
  text-transform: default;
}

And it works on my landing page, index.tsx, as expected - I can import styled and jsx and build with style-props etc. But as soon as I navigate to a Nextra-controlled page (/docs) the styles disappear from my page during page-load and any components I import on .mdx files do not have any of the CSS rules applied. The class names are there from style-props, but there are no actual CSS.

// index.mdx
import { styled } from "@/styled-system/jsx";
<styled.p color="red">test</styled.p>

Another observation: if I load my index page (which is a fully custom TSX file - works fine) then navigate to /docs (Nextra) then navigate back, quite a few styles are now missing from my index page - they return after a refresh, but it does break layout.

Any extra bits we need to do for Nextra to load PostCSS?

References:

• https://nextra.site/docs/guide/custom-css
• https://panda-css.com/docs/installation/nextjs?value=pages-dir
• https://github.com/vercel/next.js/blob/canary/examples/panda-css/postcss.config.js