Implement CSS classnames for nextra-theme-docs

[nikischin]

Why:

The size of Nextra DOM on big projects gets huge, as many pages generate a huge Navigation DOM due to the incline css of Tailwind. One Nav item looks like this:

<li class="">
    <a class="x:focus-visible:nextra-focus x:flex x:rounded x:px-2 x:py-1.5 x:text-sm x:transition-colors x:[word-break:break-word] x:cursor-pointer x:contrast-more:border x:text-gray-600 x:hover:bg-gray-100 x:hover:text-gray-900 x:dark:text-neutral-400 x:dark:hover:bg-primary-100/5 x:dark:hover:text-gray-50 x:contrast-more:text-gray-900 x:contrast-more:dark:text-gray-50 x:contrast-more:border-transparent x:contrast-more:hover:border-gray-900 x:contrast-more:dark:hover:border-gray-50" href="/docs/guide/i18n">Next.js I18n</a>
</li>

So if your page has 500 articles this would be included in the DOM 500 times.

With custom CSS classes one Navigation item could look something like this:

<li class="">
    <a class="nextra-sidebar-link" href="/docs/features/i18n">Next.js I18n</a>
</li>

Which would reduce the DOM size quite a bit.

This PR focusses on the transition from inline css utility classes to custom CSS classes. It started with just Nextra-Theme-Docs in order to keep the review process simple, however, I would like to transition also the nextra core and the blog theme, as soon as this PR gets approved.

I kept the utility classes in the CSS file and did not move to native CSS for easier review, and to keep it a non-breaking change. However, if preferred, I could also migrate the utility classes to native CSS. Also please feel free to rename the CSS class names I chose.

Closes:

What's being changed (if available, include any code snippets, screenshots, or gifs):

Most of the inline CSS utility classes moved to CSS file.

Check off the following:

• I have reviewed my changes in staging, available via the View
  deployment link in this PR's timeline (this link will be available after
  opening the PR).

[changeset-bot]

⚠️ No Changeset found

Latest commit: 65d0d33

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

@nikischin is attempting to deploy a commit to the Vercel Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
nextra-v2	Error			Oct 5, 2025 1:49pm