CSS?

[airbrief]

Hi, I've just found Nextra which looks ace. How do you change the CSS? font size

[shuding]

You can create another CSS file and import it via _app.js.

[surjithctly]

Hey, How can I change Tailwind Classes? Currently, The design is same for every user.

I wanted to change the look and feel completely using Tailwind. But keep all of your nice functionality. But since everything comes from a package, I'm confused.

Please guide.

For example, I want to change the container max width

// Change this
flex flex-1 h-full

// to this
flex flex-1 h-full max-w-2xl

[surjithctly]

Any thoughts on this @shuding

[shuding]

I think you can fork and create your own theme: https://github.com/shuding/nextra/tree/core/packages. There're 2 themes and you can extend your own docs theme based on the default one.

[guylepage3]

I added an _app.js file to the pages directory and added a CSS file as well.

import './theme.css';

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

This file however cascades after the styles in the theme.

Any suggestions?

— UPDATE!
I found a very rough solution to this here: #54 (comment)

[vshwjet]

What was the solution? Can you share it here

[guylepage3]

So apparently Tailwind CSS recommends NOT to use Tailwind for any templating, design systems, etc. Since Tailwind CSS was used to create the Nextra templates, it's next to impossible to override/overwrite any of the CSS in the templates. Tailwind will need to be removed from these templates sooner rather than later or these will strictly be rendered as demo templates.

I'll open an issue and pin it here.

[guylepage3]

Hm.. The comment marked off-topic is the "actual" answer to randomly only saying... "You can create another CSS file and import it via _app.js."

You may want to change that.

[dimaMachina]

https://nextra.site/docs/guide/custom-css