diff --git a/src/darkLightMode.js b/src/darkLightMode.js
new file mode 100644
index 00000000..7e1b4dad
--- /dev/null
+++ b/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}\``,
+ `
`
+ )}\n\nRead more at https://twinredirect.page.link/darkLightMode\n`
+ )
+
+export { checkDarkLightClasses }
diff --git a/src/logging.js b/src/logging.js
index 628fc45b..59d54335 100644
--- a/src/logging.js
+++ b/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)
diff --git a/src/macro/tw.js b/src/macro/tw.js
index c8874faf..82f6fcc4 100644
--- a/src/macro/tw.js
+++ b/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:
or
`
+ `Only plain strings can be used with the "tw" prop.\nEg:
or
\nRead more at https://twinredirect.page.link/template-literals`
)
)
diff --git a/src/prechecks.js b/src/prechecks.js
index 78977849..6001b307 100644
--- a/src/prechecks.js
+++ b/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`',
'
'
)}\n`