Improve various warnings (#7118)

Author: reinink

src/corePlugins.js

@@ -144,6 +144,7 @@ export let variantPlugins = {
       log.warn('darkmode-false', [
         '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.',
+        'https://tailwindcss.com/docs/upgrade-guide#remove-dark-mode-configuration',
       ])
     }
 

src/lib/expandTailwindAtRules.js

@@ -247,7 +247,8 @@ export default function expandTailwindAtRules(context) {
 
     if (layerNodes.utilities && utilityNodes.size === 0 && !hasUtilityVariants) {
       log.warn('content-problems', [
-        'No utilities were generated, there is likely a problem with the `content` key in the Tailwind config. For more information see the documentation: https://tailwindcss.com/docs/content-configuration',
+        'No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.',
+        'https://tailwindcss.com/docs/content-configuration',
       ])
     }
 

src/lib/normalizeTailwindDirectives.js

@@ -49,6 +49,7 @@ export default function normalizeTailwindDirectives(root) {
         log.warn(`${atRule.name}-at-rule-deprecated`, [
           `The \`@${atRule.name}\` directive has been deprecated in Tailwind CSS v3.0.`,
           `Use \`@layer utilities\` or \`@layer components\` instead.`,
+          'https://tailwindcss.com/docs/upgrade-guide#replace-variants-with-layer',
         ])
       }
       layerDirectives.add(atRule)

src/lib/setupContextUtils.js

@@ -656,7 +656,7 @@ function registerPlugins(plugins, context) {
         log.warn('root-regex', [
           '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
+          'https://tailwindcss.com/docs/content-configuration#safelisting-classes',
         ])
         continue
       }
@@ -714,6 +714,7 @@ function registerPlugins(plugins, context) {
         log.warn([
           `The safelist pattern \`${regex}\` doesn't match any Tailwind CSS classes.`,
           'Fix this pattern or remove it from your `safelist` configuration.',
+          'https://tailwindcss.com/docs/content-configuration#safelisting-classes',
         ])
       }
     }

src/util/normalizeConfig.js

@@ -124,7 +124,7 @@ export function normalizeConfig(config) {
     log.warn('purge-deprecation', [
       '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
+      'https://tailwindcss.com/docs/upgrade-guide#configure-content-sources',
     ])
   }
 
@@ -145,7 +145,7 @@ export function normalizeConfig(config) {
     log.warn('prefix-function', [
       'As of Tailwind CSS v3.0, `prefix` cannot be a function.',
       'Update `prefix` in your configuration to be a string to eliminate this warning.',
-      // TODO: Add https://tw.wtf/prefix-function
+      'https://tailwindcss.com/docs/upgrade-guide#prefix-cannot-be-a-function',
     ])
     config.prefix = ''
   } else {
@@ -250,8 +250,8 @@ export function normalizeConfig(config) {
   for (let file of config.content.files) {
     if (typeof file === 'string' && /{([^,]*?)}/g.test(file)) {
       log.warn('invalid-glob-braces', [
-        `The glob pattern ${dim(file)} in your config is invalid.`,
-        `    Update it to ${dim(file.replace(/{([^,]*?)}/g, '$1'))} to silence this warning.`,
+        `The glob pattern ${dim(file)} in your Tailwind CSS configuration is invalid.`,
+        `Update it to ${dim(file.replace(/{([^,]*?)}/g, '$1'))} to silence this warning.`,
         // TODO: Add https://tw.wtf/invalid-glob-braces
       ])
       break
@@ -260,7 +260,9 @@ export function normalizeConfig(config) {
 
   if (config.content.files.length === 0) {
     log.warn('content-problems', [
-      'The `content` key is missing or empty. Please populate the content key as Tailwind generates utilities on-demand based on the files that use them. For more information see the documentation: https://tailwindcss.com/docs/content-configuration',
+      'The `content` option in your Tailwind CSS configuration is missing or empty.',
+      'Configure your content sources or your generated CSS will be missing styles.',
+      'https://tailwindcss.com/docs/content-configuration',
     ])
   }