diff --git a/src/lib/substituteClassApplyAtRules.js b/src/lib/substituteClassApplyAtRules.js
index 8f0f1eee5..9763118c4 100644
--- a/src/lib/substituteClassApplyAtRules.js
+++ b/src/lib/substituteClassApplyAtRules.js
@@ -167,8 +167,6 @@ function makeExtractUtilityRules(css, lookupTree, config) {
       if (utilityMap[utilityName] === undefined) {
         // Look for prefixed utility in case the user has goofed
         const prefixedUtility = prefixSelector(config.prefix, `.${utilityName}`).slice(1)
-        const suggestedClass = didYouMean(utilityName, Object.keys(utilityMap))
-        const suggestionMessage = suggestedClass ? `, but \`${suggestedClass}\` does` : ''
 
         if (utilityMap[prefixedUtility] !== undefined) {
           throw rule.error(
@@ -176,6 +174,9 @@ function makeExtractUtilityRules(css, lookupTree, config) {
           )
         }
 
+        const suggestedClass = didYouMean(utilityName, Object.keys(utilityMap))
+        const suggestionMessage = suggestedClass ? `, but \`${suggestedClass}\` does` : ''
+
         throw rule.error(
           `The \`${utilityName}\` class does not exist${suggestionMessage}. If you're sure that \`${utilityName}\` exists, make sure that any \`@import\` statements are being properly processed before Tailwind CSS sees your CSS, as \`@apply\` can only be used for classes in the same CSS tree.`,
           { word: utilityName }