dark + light class suggestions

src/darkLightMode.js

@@ -0,0 +1,14 @@
+import { throwIf } from './utils'
+import { logBadGood } from './logging'
+
+const checkDarkLightClasses = className =>
+  throwIf(
+    ['dark', 'light'].includes(className),
+    () =>
+      `\n\n"${className}" must be added as className:\n\n${logBadGood(
+        `tw\`${className}\``,
+        `<div className="${className}">`
+      )}\n\nRead more at https://twinredirect.page.link/darkLightMode\n`
+  )
+
+export { checkDarkLightClasses }

src/logging.js

@@ -1,5 +1,6 @@
 import chalk from 'chalk'
 import getSuggestions from './suggestions'
+import { checkDarkLightClasses } from './darkLightMode'
 
 const color = {
   error: chalk.hex('#ff8383'),
@@ -123,8 +124,9 @@ const errorSuggestions = properties => {
     pieces: { className },
   } = properties
 
-  const textNotFound = logNoClass(properties)
+  checkDarkLightClasses(className)
 
+  const textNotFound = logNoClass(properties)
   if (!hasSuggestions) return spaced(textNotFound)
 
   const suggestions = getSuggestions(properties)

src/macro/tw.js

@@ -23,7 +23,7 @@ const handleTwProperty = ({ path, t, state }) => {
   // Feedback for unsupported usage
   throwIf(nodeValue.expression && !expressionValue, () =>
     logGeneralError(
-      `Only plain strings can be used with the "tw" prop.\nEg: <div tw="text-black" /> or <div tw={"text-black"} />`
+      `Only plain strings can be used with the "tw" prop.\nEg: <div tw="text-black" /> or <div tw={"text-black"} />\nRead more at https://twinredirect.page.link/template-literals`
     )
   )
 

src/prechecks.js

@@ -5,7 +5,7 @@ const precheckGroup = ({ classNameRaw }) =>
   throwIf(
     classNameRaw === 'group',
     () =>
-      `"group" must be added as className:\n\n${logBadGood(
+      `\n\n"group" must be added as className:\n\n${logBadGood(
         'tw`group`',
         '<div className="group">'
       )}\n`