Improve warnings (#5666)

Author: reinink

src/corePlugins.js

@@ -302,8 +302,8 @@ export let variantPlugins = {
     if (mode === false) {
       mode = 'media'
       log.warn('darkmode-false', [
-        '`darkMode` is set to `false` in your config.',
-        'This will behave just like the `media` value.',
+        'The `darkMode` option in your Tailwind CSS configuration is set to `false`, which now behaves the same as `media`.',
+        'Change `darkMode` to `media` or remove it entirely.',
       ])
     }
 

src/featureFlags.js

@@ -40,7 +40,7 @@ export function issueFlagNotices(config) {
 
     log.warn('experimental-flags-enabled', [
       `You have enabled experimental features: ${changes}`,
-      'Experimental features are not covered by semver, may introduce breaking changes, and can change at any time.',
+      'Experimental features in Tailwind CSS are not covered by semver, may introduce breaking changes, and can change at any time.',
     ])
   }
 }

src/lib/generateRules.js

@@ -293,24 +293,17 @@ function* resolveMatches(candidate, context) {
             )
             .join('\n\n')
 
-          messages.push(
-            `  - Replace "${candidate}" with "${candidate.replace(
-              '[',
-              `[${type}:`
-            )}" for:\n${rules}\n`
-          )
+          messages.push(`  Use \`${candidate.replace('[', `[${type}:`)}\` for \`${rules.trim()}\``)
           break
         }
       }
 
       log.warn([
-        // TODO: Update URL
-        `The class "${candidate}" is ambiguous and matches multiple utilities. Use a type hint (https://tailwindcss.com/docs/just-in-time-mode#ambiguous-values) to fix this.`,
-        '',
+        `The class \`${candidate}\` is ambiguous and matches multiple utilities.`,
         ...messages,
-        `If this is just part of your content and not a class, replace it with "${candidate
+        `If this is content and not a class, replace it with \`${candidate
           .replace('[', '[')
-          .replace(']', ']')}" to silence this warning.`,
+          .replace(']', ']')}\` to silence this warning.`,
       ])
       continue
     }

src/lib/normalizeTailwindDirectives.js

@@ -42,7 +42,8 @@ export default function normalizeTailwindDirectives(root) {
     if (['layer', 'responsive', 'variants'].includes(atRule.name)) {
       if (['responsive', 'variants'].includes(atRule.name)) {
         log.warn(`${atRule.name}-at-rule-deprecated`, [
-          `'@${atRule.name}' is deprecated, use '@layer utilities' or '@layer components' instead.`,
+          `The \`@${atRule.name}\` directive has been deprecated in Tailwind CSS v3.0.`,
+          `Use \`@layer utilities\` or \`@layer components\` instead.`,
         ])
       }
       layerDirectives.add(atRule)

src/lib/setupContextUtils.js

@@ -306,18 +306,8 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
             return []
           }
 
-          if (!type.includes(coercedType)) {
-            if (isOnlyPlugin) {
-              log.warn([
-                `Unnecessary typehint \`${coercedType}\` in \`${identifier}-${modifier}\`.`,
-                `You can safely update it to \`${identifier}-${modifier.replace(
-                  coercedType + ':',
-                  ''
-                )}\`.`,
-              ])
-            } else {
-              return []
-            }
+          if (!type.includes(coercedType) && !isOnlyPlugin) {
+            return []
           }
 
           if (!isValidArbitraryValue(value)) {
@@ -615,9 +605,9 @@ function registerPlugins(plugins, context) {
 
       if (value instanceof RegExp) {
         log.warn('root-regex', [
-          // TODO: Improve this warning message
-          'RegExp in the safelist option is not supported.',
-          'Please use the object syntax instead: https://tailwindcss.com/docs/...',
+          'Regular expressions in `safelist` work differently in Tailwind CSS v3.0.',
+          'Update your `safelist` configuration to eliminate this warning.',
+          // TODO: Add https://tw.wtf/regex-safelist
         ])
         continue
       }
@@ -665,9 +655,8 @@ function registerPlugins(plugins, context) {
         if (count !== 0) continue
 
         log.warn([
-          // TODO: Improve this warning message
-          `You have a regex pattern in your "safelist" config (${regex}) that doesn't match any utilities.`,
-          'For more info, visit https://tailwindcss.com/docs/...',
+          `The safelist pattern \`${regex}\` doesn't match any Tailwind CSS classes.`,
+          'Fix this pattern or remove it from your `safelist` configuration.',
         ])
       }
     }

src/public/colors.js

@@ -3,7 +3,7 @@ import log from '../util/log'
 function warn({ version, from, to }) {
   log.warn(`${from}-color-renamed`, [
     `As of Tailwind CSS ${version}, \`${from}\` has been renamed to \`${to}\`.`,
-    'Please update your color palette to eliminate this warning.',
+    'Update your configuration file to silence this warning.',
   ])
 }
 

src/util/normalizeConfig.js

@@ -122,8 +122,9 @@ export function normalizeConfig(config) {
 
   if (!valid) {
     log.warn('purge-deprecation', [
-      'The `purge` option in your tailwind.config.js file has been deprecated.',
-      'Please rename this to `content` instead.',
+      'The `purge`/`content` options have changed in Tailwind CSS v3.0.',
+      'Update your configuration file to eliminate this warning.',
+      // TODO: Add https://tw.wtf/purge-deprecation
     ])
   }