Skip to content

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

@quanghien95

Description

@quanghien95

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions