I have gone through an online next-auth v4 tutorial and created a custom sign in page. Everything works flawlessly on the logic front, but when adding in the NextUI / Tailwind CSS styling, it’s completely ignored. The actual components render (ie, an shows and image where it should be and a renders a button, just within any of the styling). I have a fairly standard next-auth config, my pages folder is correct in the tailwind.config.ts file and my pages folder is in the correct location (calling signIn() takes me straight there). Does anyone know why this is happening?

import CredentialsProvider from 'next-auth/providers/credentials';
import GoogleProvider from 'next-auth/providers/google';
import NextAuth from 'next-auth';
import type { NextAuthOptions } from 'next-auth';
import { VerifyUser } from '@/db';

export const authOptions: NextAuthOptions = {
  theme: {
    colorScheme: 'light',
  },
  pages: {
    signIn: '/auth/signin',
  },
  callbacks: {
    async redirect({ url, baseUrl }) {
      // Allows relative callback urls
      if (url.startsWith('/')) return `${baseUrl}${url}`;
      // Redirect to the home page after successful sign-in
      else if (url.startsWith(baseUrl)) return url;
      // Prevent open redirect vulnerabilities by checking if the redirect URL is valid
      return baseUrl;
    },
  },
  // events: { FOR LOGGING SIGN IN'S INTO A LOG TABLE
  //   async signIn(message) {},
  // },
  providers: [
    CredentialsProvider({
      name: 'Credentials',
      secret: process.env.NEXTAUTH_SECRET,
      credentials: {
        username: {
          label: 'Username',
          type: 'text',
          placeholder: 'add your username',
        },
        password: { label: 'Password', type: 'password' },
      },
      async authorize(credentials, req) {
        let user = await VerifyUser(
          credentials?.username,
          credentials.password
        );
        return user;
      },
    }),
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
};

const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };

I have looked through the next-auth documentation and googled, but can’t find anything discussing this. A thread describes a similar issue here (https://github.com/nextauthjs/next-auth/issues/640), but the solution provided does not fix this issue for me.