Next-Auth v4 Custom Sign In Page Ignoring NextUI and Tailwind CSS

Question

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 'Image' shows an image where it should be and a 'Button' renders a button, just without 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?

edit: If I use inline styles, they function, ie (style={{ margin: '40px' }} does create a 40 pixel margin).

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.

Answer 1

I SOLVED THIS ISSUE.

This is to do with how next-create-app and tailwind structure the global.css import. By default, the "import global.css" is in the layout file in the app directory. This wraps everything in the app folder. Anything outside that, you have to manually "import '@/app/global.css'" for the styling to work.