Styles applied using Tailwind’s @apply take a few ms to be applied

by

I’m working on a NextJS 14 app using Tailwind. When I apply styles using @apply and I load a page it takes a few ms for the style to be visible.

For example, in global.css:

body {
  @apply bg-gray-100;
}

If I apply the style using class names (for example in the main layout.tsx file), the style is applied as soon as the page is loaded:

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body className={`bg-gray-100`}>
        {children}
      </body>
    </html>
  );
}

This happens both in dev mode and using a production build.

How can this delay be avoided?

Leave a Comment