+
+ Rules let you override the shade map for specific utilities, shades, or colours. The first
+ matching enabled rule wins.
+
+
+
+
Make all text lighter in dark mode
+
+
+ Match any text-* class and force shade
+ 300 in dark mode, regardless of the shade map.
+
+
+
+ - Utilities
+ - text
+ - Shade
+ - —
+ - In dark mode
+ - 300
+
+
+
+
+
+
Before
+
+
<h1 class="text-gray-900">Title</h1>
+<p class="text-gray-600">Subtitle</p>
+
+
+
+
After
+
+
<h1 class="text-gray-900 dark:text-gray-300">Title</h1>
+<p class="text-gray-600 dark:text-gray-300">Subtitle</p>
+
+
+
+
+
+
+
Invert heavy backgrounds, skip buttons
+
+
+ Match bg-* at shade 900 and map it to 100
+ in dark mode, but skip <button> elements.
+
+
+
+ - Utilities
+ - bg
+ - Shade
+ - 900
+ - In dark mode
+ - 100
+ - Skip elements
+ - button
+
+
+
+
+
+
Before
+
+
<div class="bg-gray-900 p-4">Panel</div>
+<button class="bg-gray-900 px-4 py-2">Save</button>
+
+
+
+
After
+
+
<div class="bg-gray-900 dark:bg-gray-100 p-4">Panel</div>
+<button class="bg-gray-900 px-4 py-2">Save</button>
+
+
+
+
+
+
+
Keep brand colours untouched
+
+
+ Match any utility but exclude indigo and violet so brand colours pass through without
+ modification.
+
+
+
+ - Utilities
+ - —
+ - Shade
+ - —
+ - In dark mode
+ - —
+ - Skip colours
+ - indigo, violet
+
+
+
+
+
+
Before
+
+
<p class="text-gray-900">Text</p>
+<span class="text-indigo-600">Brand</span>
+
+
+
+
After
+
+
<p class="text-gray-900 dark:text-gray-300">Text</p>
+<span class="text-indigo-600">Brand</span>
+
+
+
+
+