The reason it doesn't work is because tailwind only includes the classes it recognized when scanning your code, so dynamically generated classes are not included.

From the tailwind docs:

Don’t construct class names dynamically:

// BAD
<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

Instead, make sure any class names you’re using exist in full

// GOOD
<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

The cn utility function

If you've installed shadcnui following the installation guide on the site, your project will have a /lib/utils.ts file. Look here. It exports a cn() function, that may help applying whole tailwind styles based on a variable.

For example:

<Link
    className={cn(
        "text-sm hover:text-primary",
        someVariableClass
        route.active ? "text-black" : "text-muted-foreground",)
    }
>
    Some label here.
</Link>

Default className would be this string "text-sm hover:text-primary". If the route.active is true, then adds "text-black" else "text-muted-foreground".

Note that I'm using complete styles. If you're able to use the cn() utility function to achieve your results, go for it.

The style prop

If you truly want dynamic styles on runtime, then you can use the style prop to dynamically update the inline props passed to your component. Unlike tailwind which creates a stylesheet, the style prop passes inline styles which take immediate effect on runtime.

Retrieving session data

The tutorial you provided utilizes 3 party libraries for authentication, more specifically next-auth. So if you want to access session data, all you need is just to use useSession hook. It provides status field, which may be one of following values: "loading" | "authenticated" | "unauthenticated".

Passing data from middleware to pages

However, you are also asking how to pass data from middleware to pages, which is a bit more complicated. As for the current version (14.2.4) Next.js uses Edge runtime for middlewares and api routes, while using Node for rendering by default. So I doubt it's even possible to do so. Well, you may opt-in to edge runtime, but Next.js still does not provide any direct way to access req object, if you use App router. See discussions here.

As for possible solutions for passing data from middleware, I may suggest a few solutions:

1. Move middleware logic to template.tsx or layout.tsx component. There you can access you have access to headers and cookies and retrieve necessary data from them. Then you may put it in state management solution you're comfortable with (Redux, React Context, etc). Something like this:

   export const Layout = ({ children }: LayoutProps) => {
     const userData = getUserData();
     return (
       <StateProvider userData={userData}>
         {children}
       </StateProvider>
     )
   }
   

This way it would be more convenient to pass more user data if needed - user info, role, etc. Also, that's a good place to make a network request, if data retrieved from it is relevant for the whole application.

2. If that's not an option for you due to some constraints, you can make a pretty hacky solution, but working nonetheless. You can create a custom header, set it in middleware and retrieve it from your page.

    // middleware.ts
    const myMiddleware = (req: Request, res: Response, next: NextFunction) => {
      const userIsAuthenticated = checkAuthentication(req);
      req.headers['x-user-authenticated'] = userIsAuthenticated;
      return next();
    }; 
   
   
    // page.ts
    const MyPage = () => {
      const userIsAuthenticated = headers().get('x-user-authenticated');
      // rest of the logic
    }; 
   

However, I would abstain from this solution, because usually in the context of authentication, you need more than a single field. Well, passing each individual field in a separate header is cumbersome.

Summary

1. If you use next-auth library (or something similar), it provides an api to retrieve session data within pages - useSession hook for instance
2. There's no straightforward way to pass data from next middleware. You can move logic to layout or template component for app pages or use custom headers, if that's not an option.