Add proper error message

src/lib/setupContextUtils.js

@@ -228,15 +228,19 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
             let result = variantFunction({ modifySelectors, container, separator })
 
             if (typeof result === 'string' && !isValidVariantFormatString(result)) {
-              throw new Error("Custom variants must use a media query or provide an `&` to specify selector placement.")
+              throw new Error(
+                `Your custom variant \`${variantName}\` has an invalid format string. Make sure it's an at-rule or contains a \`&\` placeholder.`
+              )
             }
 
             return result
           }
         }
 
         if (!isValidVariantFormatString(variantFunction)) {
-          throw new Error("Custom variants must use a media query or provide an `&` to specify selector placement.")
+          throw new Error(
+            `Your custom variant \`${variantName}\` has an invalid format string. Make sure it's an at-rule or contains a \`&\` placeholder.`
+          )
         }
 
         return parseVariant(variantFunction)

tests/variants.test.js

@@ -222,7 +222,7 @@ describe('custom advanced variants', () => {
     }
 
     await expect(run('@tailwind components;@tailwind utilities', config)).rejects.toThrowError(
-      "Custom variants must use a media query or provide an `&` to specify selector placement."
+      "Your custom variant `wtf-bbq` has an invalid format string. Make sure it's an at-rule or contains a `&` placeholder."
     )
   })
 
@@ -241,7 +241,7 @@ describe('custom advanced variants', () => {
     }
 
     await expect(run('@tailwind components;@tailwind utilities', config)).rejects.toThrowError(
-      "Custom variants must use a media query or provide an `&` to specify selector placement."
+      "Your custom variant `wtf-bbq` has an invalid format string. Make sure it's an at-rule or contains a `&` placeholder."
     )
   })
 })