Subject: Play CDN (v3.4.16): `darkMode: 'class'` strategy not applying styles despite correct setup #17908

saada1964 · 2025-05-07T00:03:05Z

saada1964
May 7, 2025

What version of Tailwind CSS are you using?

Tailwind Play CDN (The generated CSS includes comments indicating tailwindcss v3.4.16)

What build tool (or framework if it abstracts the build tool) are you using?

N/A (Using the Tailwind Play CDN directly in a static HTML file, no build tool involved)

What version of Node.js are you using?

N/A (Not using Node.js, as this is a client-side issue with the Play CDN)

What browser are you using?

Chrome 135.0.7049.115 / Microsoft Edge 135.0.3179.98

What operating system are you using?

Windows 10

Reproduction URL

I've created a minimal reproduction on CodePen:

Alternative minimal HTML code if a live link is problematic for any reason:

`
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minimal Test - Tailwind CDN Dark Mode</title>
    <script>
        window.tailwind = window.tailwind || {};
        window.tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {}
            }
        };
        // console.log("Minimal Test - Tailwind config:", JSON.stringify(window.tailwind.config));
    </script>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-white dark:bg-black text-black dark:text-white min-h-screen flex flex-col items-center justify-center">

    <button id="toggleButton" class="p-2 mb-4 border border-gray-400 rounded hover:bg-gray-100 dark:hover:bg-gray-700">
        Toggle Dark Mode
    </button>

    <div class="p-4 bg-blue-300 dark:bg-blue-700 text-lg">
        Test Content Div (Should be blue-300 light / blue-700 dark)
    </div>
    <div class="mt-4 p-4 bg-red-300 dark:bg-red-700 text-lg">
        Another Test Div (Should be red-300 light / red-700 dark)
    </div>

    <script>
        const htmlEl = document.documentElement;
        const toggleButton = document.getElementById('toggleButton');

        const applyMinimalDarkMode = (isDark) => {
            if (isDark) {
                htmlEl.classList.add('dark');
                // console.log("Minimal Test - Dark mode ON, HTML classList:", htmlEl.classList.toString());
            } else {
                htmlEl.classList.remove('dark');
                // console.log("Minimal Test - Dark mode OFF, HTML classList:", htmlEl.classList.toString());
            }
        };

        toggleButton.addEventListener('click', () => {
            applyMinimalDarkMode(!htmlEl.classList.contains('dark'));
        });

        // Simulate initial load preference (optional, for testing persistence)
        // if (localStorage.getItem('minimalDarkModeTest') === 'enabled') {
        //     applyMinimalDarkMode(true);
        // } else {
        //    applyMinimalDarkMode(false); // Default to light
        // }
        // For simplicity of reproduction, start in light mode.
        applyMinimalDarkMode(false);
    </script>
</body>
</html>
`
Describe your issue
When using the Tailwind Play CDN (v3.4.16) with the darkMode: 'class' strategy, dark mode styles are not being applied to elements, even though the dark class is correctly added to the <html> element via JavaScript and window.tailwind.config is configured appropriately before the CDN script.
Steps to Reproduce:
Include the window.tailwind.config = { darkMode: 'class' }; script before the Play CDN script.
Include the Tailwind Play CDN script (https://cdn.tailwindcss.com).
Create simple HTML elements with standard Tailwind utility classes and their dark: variants (e.g., bg-white dark:bg-black, bg-blue-300 dark:bg-blue-700).
Use JavaScript to add/remove the dark class to/from the <html> element (e.g., via a button click).
Observe the elements in the browser.
Expected Behavior:
When the dark class is present on the <html> element, the elements should render with their specified dark: variant styles. For instance, <body> should switch from bg-white to bg-black, and a div with bg-blue-300 dark:bg-blue-700 should switch to bg-blue-700.
Actual Behavior:
The elements do not change their appearance. They remain styled as per their non-prefixed utility classes (light mode styles). The dark: variants are ignored. Developer tools confirm the dark class is correctly toggled on the <html> element. The only console message is the standard advisory about not using the CDN in production.
This issue is reproducible with the minimal HTML provided in the "Reproduction URL" section (either via the CodePen link or the direct HTML code).
Thank you for looking into this.
Saadah Al Kassab
[email protected]

wongjn · 2025-05-07T06:47:17Z

wongjn
May 7, 2025
Collaborator

You'd want the <script> that modifies window.tailwind after the CDN script. See this JSFiddle.

0 replies

saada1964 · 2025-05-08T00:35:14Z

saada1964
May 8, 2025
Author

Hi Tailwind Team,

Following up on my previous issue regarding the darkMode: 'class' strategy with the Play CDN (Issue #[Your Issue Number if you have one, or refer to the date/subject]).

I wanted to confirm that the solution you provided – placing the Tailwind CDN script (<script src="https://cdn.tailwindcss.com"></script>) before the window.tailwind.config script in the <head> – has worked perfectly!

After reordering the scripts as suggested, the darkMode: 'class' functionality is now working correctly on both my minimal test case and my original, more complex page. All elements are responding as expected to the dark mode toggle.

Thank you so much for your prompt and accurate guidance on this. I really appreciate you taking the time to look into it and provide the correct script loading order. It has resolved the issue completely.

Keep up the fantastic work with Tailwind CSS!

Best regards,

Saadah Al Kassab
[email protected]

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Subject: Play CDN (v3.4.16): `darkMode: 'class'` strategy not applying styles despite correct setup #17908

{{title}}

Replies: 2 comments

{{title}}

{{title}}

Select a reply

Subject: Play CDN (v3.4.16): darkMode: 'class' strategy not applying styles despite correct setup #17908

saada1964 May 7, 2025

Replies: 2 comments

wongjn May 7, 2025 Collaborator

saada1964 May 8, 2025 Author

Subject: Play CDN (v3.4.16): `darkMode: 'class'` strategy not applying styles despite correct setup #17908

saada1964
May 7, 2025

wongjn
May 7, 2025
Collaborator

saada1964
May 8, 2025
Author