CDN dark mode Next.js

[leon-plackal]

I recently ran into an issue when trying to use the Tailwind CDN in a Next.js app. Specifically, it was unclear how to allow darkMode: 'class' for dark mode functionality while using the CDN when using the documented inline script method. It seemed to be unsuccessful specifically with Next.js.

I know this is a pretty niche case where you want all classes to be available dynamically after build, however here is a solution that worked for me in my Next.js app:

<Script
  src="https://cdn.tailwindcss.com"
  onLoad={() => {
      window.tailwind = window.tailwind || {};
      window.tailwind.config = {
          darkMode: 'class',
      };
  }}
/>

So I thought it might help to share. You would add this in a layout.js file where you want all classes to be available. Tested in 3.4.1