Skip to content
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.

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

[Bug]: Some tailwind responsive class was purge unexpected since version 7 #1324

Open
1 task done
quanghien95 opened this issue Feb 13, 2025 · 0 comments
Open
1 task done
Labels

Comments

@quanghien95
Copy link

Describe the bug

Hello,
After upgrade to Purge css version 7 , I notice that some tailwind class was removed after purgecss running

purgecss.config.js

module.exports = {
    defaultExtractor: (content) => content.match(/[\w\-:.&\/\(),'[#%!*\]]+(?<!:)/g) || []
};

Example HTML

<nav class="navigation hidden lg:block w-full order-10"></nav>

Example CSS input

.lg\:block {
  display: block;
}

/* Reset some default browser styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Body Styles */
body {
  font-family: 'Arial', sans-serif;
  background-color: #f4f4f4;
  color: #333;
  line-height: 1.6;
}

/* Container for content */
.container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Headings */
h1, h2, h3 {
  margin-bottom: 15px;
  color: #007BFF; /* Bootstrap primary color */
}

h1 {
  font-size: 2.5em; /* 40px */
}

h2 {
  font-size: 2em; /* 32px */
}

h3 {
  font-size: 1.5em; /* 24px */
}

/* Links */
a {
  color: #007BFF;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Buttons */
.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007BFF; 
  color: #ffffff;
  border: none;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #0056b3; /* Darker shade */
}

/* Example Card */
.card {
  border: 1px solid #e2e2e2;
  border-radius: 5px;
  padding: 15px;
  margin: 10px 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.card-title {
  font-size: 1.25em;
  margin-bottom: 10px;
}

.card-content {
  font-size: 1em;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .container {
      padding: 10px;
  }

  h1 {
      font-size: 2em;
  }

  h2 {
      font-size: 1.5em;
  }

  .button {
      padding: 8px 16px;
  }
}

Purgecss v6:

.lg\:block {
  display: block;
}

/* Reset some default browser styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Purgecss v7

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

I already tried add \\ to extractor but no luck

Any idea. ?

To Reproduce

Please copy the HTML and CSS from the example above.
Then, run PurgeCSS and note that it remove wrong CSS.

Expected Behavior

Working like purge css v6

Environment

purgecss: 7.0.2

Add any other context about the problem here

No response

Code of Conduct

  • I agree to follow this project's Code of Conduct
@quanghien95 quanghien95 changed the title [Bug]: Some tailwind class was remove since version 7 [Bug]: Some tailwind responsive class was purge unexpected since version 7 Feb 13, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant