diff --git a/__tests__/fixtures/purge-example.html b/__tests__/fixtures/purge-example.html
index 5e07ba579aeb..722f5f8ef9d9 100644
--- a/__tests__/fixtures/purge-example.html
+++ b/__tests__/fixtures/purge-example.html
@@ -13,3 +13,10 @@
 
 <!-- Custom classes with really weird characters -->
 <div class="min-h-(screen-4) bg-black! font-%#$@ w-(1/2+8)"></div>
+
+<!-- Pug -->
+span.inline-grid.grid-cols-3
+  .col-span-2
+    Hello
+  .col-span-1.text-center
+    World!
\ No newline at end of file
diff --git a/__tests__/fixtures/tailwind-output-purged.css b/__tests__/fixtures/tailwind-output-purged.css
index d1ee8726ab83..895c3629b84f 100644
--- a/__tests__/fixtures/tailwind-output-purged.css
+++ b/__tests__/fixtures/tailwind-output-purged.css
@@ -594,6 +594,10 @@ video {
   display: block;
 }
 
+.inline-grid {
+  display: inline-grid;
+}
+
 .font-\%\#\$\@ {
   font-family: Comic Sans;
 }
@@ -602,6 +606,10 @@ video {
   height: 100vh;
 }
 
+.text-center {
+  text-align: center;
+}
+
 .w-\(1\/2\+8\) {
   width: calc(50% + 2rem);
 }
@@ -610,6 +618,18 @@ video {
   width: 50%;
 }
 
+.grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.col-span-1 {
+  grid-column: span 1 / span 1;
+}
+
+.col-span-2 {
+  grid-column: span 2 / span 2;
+}
+
 .example {
   font-weight: 700;
   color: #f56565;
diff --git a/src/lib/purgeUnusedUtilities.js b/src/lib/purgeUnusedUtilities.js
index 2e2c701d6931..d112a2923da4 100644
--- a/src/lib/purgeUnusedUtilities.js
+++ b/src/lib/purgeUnusedUtilities.js
@@ -50,7 +50,13 @@ export default function purgeUnusedUtilities(config) {
     },
     purgecss({
       content: Array.isArray(config.purge) ? config.purge : config.purge.paths,
-      defaultExtractor: content => content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || [],
+      defaultExtractor: content => {
+        return (
+          content
+            .match(/[^<>"'`\s]*[^<>"'`\s:]/g)
+            .concat(content.match(/[^<>"'`\s.]*[^<>"'`\s:.]/g)) || []
+        )
+      },
     }),
   ])
 }