Why is adding a comment in an unrelated file affecting the theme of the app in Next.js?

I'm trying to implement a Next.js application with light and dark themes. I'm using TailwindCSS along with next-themes. My system preference theme is dark mode by default. However, when I load the page, I get the light themed background. The inspector shows that dark mode is enabled in the html attribute.

When I add a particular comment in an unrelated and un-imported file, the theme changes to the correct one.

Here's a minimal example repository that describes the issue. Steps to reproduce the problem:

1. Clone the repository using

   git clone https://github.com/captnTardigrade/MRE.git
   

2. Install the dependencies using a shell by running the following in the folder

   npm install
   

3. Open a terminal and run npm run dev

4. Observe that the default background color loaded is light in color.

5. Add the following comment in app/components/foo.tsx:

    // setTheme("dark");
   

6. Observe the background color. It should be dark.

> NOTE: Ensure that your default system preference is dark mode before trying to replicate the above steps.

When building the project we get the following warning.

warn - No utility classes were detected in your source files.

In your globals.css file you have put the .dark class inside an @layer base but as dark is not found in any source files it is not included in the final output.

When you add the comment in app/components/foo.tsx Tailwind detects the dark class.

This is explained in the documentation.

https://tailwindcss.com/docs/content-configuration#class-detection-in-depth

> The way Tailwind scans your source code for classes is intentionally very simple — we don’t actually parse or execute any of your code in the language it’s written in, we just use regular expressions to extract every string that could possibly be a class name.