I’m importing constants that are Tailwind CSS classes in a Next.js server component:

constants.ts:

export const SIDEBAR_WIDTH = 'lg:w-56 md:w-20';
export const SIDEBAR_OFFSET = 'md:ml-20 lg:ml-56';
export const SIDEBAR_OFFSET_POS = 'md:left-20 lg:left-56';
export const SIDEBAR_OFFSET_MAX = 'max-w-screen-md md:ml-20 lg:ml-56';

layout.tsx:

import { SIDEBAR_WIDTH, SIDEBAR_OFFSET, SIDEBAR_OFFSET_MAX } from '@/constants';

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  console.log('SIDEBAR_WIDTH:', SIDEBAR_WIDTH);  return <div>Test</div>;
}

The Tailwind CSS classes weren’t being applied, so I decided to log them:

SIDEBAR_WIDTH: {}

What could be the reason, and how to fix it?