TailwindCSS not working in new Nextra web app

Question

I just started up a brand new Nextra site based off the template here: https://vercel.com/templates/next.js/documentation-starter-kit

I deployed it and everything pre-TailwindCSS works just fine. I followed the instructions here: https://nextra.site/docs/guide/advanced/tailwind-css, and on the NextJS docs to install TailwindCSS but TailwindCSS classes are still not applying to my text in the MDX files.

Git Repo: https://github.com/Sciphr/KICSDocumentation

I've gone through the normal TailwindCSS steps for numerous web applications, but this is the first time I've tried this Nextra theme/documentation template.

Here are the corresponding files (Note the '' component in the final file, is the exact same code as the inline function in the index.mdx file:

next.config.js

const withNextra = require("nextra")({
  theme: "nextra-theme-docs",
  themeConfig: "./theme.config.tsx",
});

module.exports = withNextra();

package.json

{
  "name": "documenation",
  "version": "0.0.1",
  "description": "Documentation",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Sciphr/KICSDocumentation.git"
  },
  "author": "Jacob",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/Sciphr/KICSDocumentation/issues"
  },
  "homepage": "https://github.com/Sciphr/KICSDocumentation/#readme",
  "dependencies": {
    "eslint": "^8.57.0",
    "next": "^14.1.0",
    "nextra": "latest",
    "nextra-theme-docs": "latest",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/node": "18.11.10",
    "autoprefixer": "^10.4.17",
    "postcss": "^8.4.35",
    "tailwindcss": "^3.4.1",
    "typescript": "^4.9.3"
  }
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,md,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,md,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,md,mdx}",

    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,md,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

And the MDX file I'm using for testing (index.mdx):

##

import Tester from "../components/tester";

<Tester />

##

import React from "react";

export const Tester2 = () => {
  return (
    <div>
      <h1 className="text-blue-700">Tester 2</h1>
    </div>
  );
};

<Tester2 />

Answer 1

Update: So I seemed to have 'potentially' fixed it. Currently it is working but I am not 100% confident in the fix. Here is what I did:

Created an "_app.js" file in the Pages folder (Nextra defaults to using pages for their template), and adding an import for your globals.css file; Just like you would in your layout.js file in Next.js 14 App router

import "../styles/globals.css";
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;}

That worked in my localhost, however deploying to Vercel, it failed. So I added 'standalone: true' to my next.config.js file, and that seemed to have fixed the problem, so officially it is running. I will keep this up for the next week just to see if anyone else has any better ideas/can correct me on my potentially lackluster fix.

const withNextra = require("nextra")({
theme: "nextra-theme-docs",
themeConfig: "./theme.config.tsx",
standalone: true,
});

module.exports = withNextra();