Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
saada1964 opened this issue May 7, 2025 · 0 comments
Closed

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

saada1964 opened this issue May 7, 2025 · 0 comments

Comments

@saada1964
Copy link

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
saada1964@gmail.com
@wongjn wongjn converted this issue into discussion #17908 May 7, 2025

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@saada1964