Skip to content

tailwind css Dark/Light Mode Toggle Not Working After CSS Minification with cleanCSS #96

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
Open
ibrahimAlselawi opened this issue Feb 17, 2025 · 0 comments
Open

tailwind css Dark/Light Mode Toggle Not Working After CSS Minification with cleanCSS #96

ibrahimAlselawi opened this issue Feb 17, 2025 · 0 comments

Comments

@ibrahimAlselawi
Copy link

ibrahimAlselawi commented Feb 17, 2025 •
edited
Loading

Description: I'm working on a website with a Dark/Light Mode toggle. The toggle works properly in development, where it adds a dark class to the tag when switching to Dark Mode. However, after applying the cleanCSS function to minify the CSS, the toggling no longer works as expected, even though the CSS files are correctly generated in the output.

Steps to Reproduce:

  • Implement a Dark/Light Mode toggle that adds a dark class to the <body> tag.

  • Run the Gulp task to minify CSS using  `cleanCSS({ level: 1 }).`

  • Observe that while the toggle correctly adds the dark class to the <body> tag, the dark mode styles are no longer applied after the minification step.

Current Behavior:

  • The dark class is added to the <body> tag when toggling Dark Mode.

  • However, the corresponding Dark Mode styles are not applied, despite the presence of the dark class.

  • The issue only occurs after running the CSS through the cleanCSS function in Gulp.

Expected Behavior:

**After minification, the toggle should still correctly apply Dark Mode styles when the dark class is added to the <body> tag.**

Gulp Task Configuration:

const gulp = require('gulp');
 const cleanCSS = require('gulp-clean-css');
 function minifyCSS() {
    return gulp.src('src/assets/css/*.css')
           .pipe(postcss([
                require('tailwindcss'),
                require('autoprefixer'),
                require('@tailwindcss/forms'),
              ]))
          .pipe(cleanCSS({ level: 1 }))
          .pipe(gulp.dest('www/assets/css'));
      }
    
    exports.minifyCSS = minifyCSS;

What I’ve Tried:

  • Ensured that the correct dark class is being added to the <body> tag.

  • Verified that the minified CSS file exists in the output directory and contains the expected styles.

  • Tried adjusting the cleanCSS options, but the issue persists.
  • stoped the postcss but the issue persists.

Additional Information:

This issue only appears when the cleanCSS step is included in the Gulp task. Without minification, the Dark/Light Mode toggle works fine.
Using cleanCSS({ level: 1 }) in this task does not seem to affect the functionality of other CSS styles, but causes problems specifically with the Dark/Light Mode toggling.

Environment:

gulp-CLI version: 3.0.0
gulp-Local version: 5.0.0
node version : 22.13.1
gulp-clean-css version : "^4.3.0",
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@ibrahimAlselawi