Add new variants (#1)

ChanceArthur · ChanceArthur · commit 2badeaaa7625 · 2019-05-02T12:40:14.000-04:00
The following variants are now available:
- dark-hover
- dark-focus
- dark-active
- dark-group-hover
- dark-focus-within
diff --git a/README.md b/README.md
@@ -14,31 +14,46 @@ plugins: [
 ]
 ```
 
-If you'd like to switch between light and dark modes depending on the time of day, `dark-mode.js` is provided, which is a simple script that adds the `.mode-dark` class to the `<html>` element from 6 PM to 6 AM in the user's timezone.
-
 ## Usage
 
-Dark mode must be enabled in your Tailwind configuration for any utilities that need it.
+Styles generated by this plugin are only used if the `mode-dark` class is applied to the `<html>` element. How you do that is up to you. `dark-mode.js` is provided as an option, which is a simple script that enables dark mode from 6 PM to 6 AM in the user's timezone.
 
-```javascript
-variants: {
-  backgroundColor: ['responsive', 'hover', 'focus', 'dark'],
-  borderColor: ['responsive', 'hover', 'focus', 'dark'],
-  textColor: ['responsive', 'hover', 'focus', 'dark']
-}
-```
+### Available Variants
+
+Variants for dark mode are based on [Tailwind's own variants](https://tailwindcss.com/docs/state-variants/)...
+
+- `dark`
+- `dark-hover`
+- `dark-focus`
+- `dark-active`
+- `dark-group-hover`
+- `dark-focus-within`
 
-Styles specific to dark mode are applied as a variant (the same as responsive, hover, focus, etc).
+... and are used in the same way.
 
 ```html
 <div class="bg-white dark:bg-black">
   <p class="text-black dark:text-white">
     My eyes are grateful.
+
+    <a ... class="text-blue-300 hover:text-blue-400 dark:text-blue-700 dark-hover:text-blue-600">
+      Learn more
+    </a>
   </p>
 </div>
 ```
 
-The markup above would show a white background with black text by default. If `.mode-dark` was applied to the `<html>` element, the background would be black with white text.
+### Enabling Variants
+
+As with existing variants such as `hover` and `focus`, variants for dark mode must be enabled in your Tailwind configuration for any utilities that need them.
+
+```javascript
+variants: {
+  backgroundColor: ['dark', 'dark-hover', 'dark-group-hover'],
+  borderColor: ['dark', 'dark-focus', 'dark-focus-within'],
+  textColor: ['dark', 'dark-hover', 'dark-active']
+}
+```
 
 ## PurgeCSS
 
@@ -48,13 +63,13 @@ If you are using PurgeCSS, you should either add `mode-dark` to the `whitelist`
 whitelist: ['mode-dark']
 ```
 
-... Or add `dark-mode.js` to the `content` array.
+... or add `dark-mode.js` to the `content` array.
 
 ```javascript
 content: [
   '**/*.js',
-  'dark-mode.js'
+  './node_modules/tailwindcss-dark-mode/dark-mode.js'
 ]
 ```
 
-Otherwise, PurgeCSS will assume that any classes related to dark mode should be removed, as the `.mode-dark` class is only applied when the page is loaded.
+Otherwise, PurgeCSS will assume that any classes related to dark mode should be removed, as the `mode-dark` class is only applied when the page is loaded.
diff --git a/index.js b/index.js
@@ -5,5 +5,35 @@ module.exports = function() {
         return `.mode-dark .${e(`dark${separator}${className}`)}`;
       });
     });
+
+    addVariant('dark-hover', ({modifySelectors, separator}) => {
+      modifySelectors(({className}) => {
+        return `.mode-dark .${e(`dark-hover${separator}${className}`)}:hover`;
+      });
+    });
+
+    addVariant('dark-focus', ({modifySelectors, separator}) => {
+      modifySelectors(({className}) => {
+        return `.mode-dark .${e(`dark-focus${separator}${className}`)}:focus`;
+      });
+    });
+
+    addVariant('dark-active', ({modifySelectors, separator}) => {
+      modifySelectors(({className}) => {
+        return `.mode-dark .${e(`dark-active${separator}${className}`)}:active`;
+      });
+    });
+
+    addVariant('dark-group-hover', ({modifySelectors, separator}) => {
+      modifySelectors(({className}) => {
+        return `.mode-dark .group:hover .${e(`dark-group-hover${separator}${className}`)}`;
+      });
+    });
+
+    addVariant('dark-focus-within', ({modifySelectors, separator}) => {
+      modifySelectors(({className}) => {
+        return `.mode-dark .${e(`dark-focus-within${separator}${className}`)}:focus-within`;
+      });
+    });
   };
 };
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tailwindcss-dark-mode",
-  "description": "A Tailwind CSS plugin that adds a variant for dark mode",
-  "version": "1.0.2",
+  "description": "A Tailwind CSS plugin that adds variants for dark mode",
+  "version": "1.0.3",
   "author": "Chance Arthur",
   "license": "MIT",
   "copyright": "Chance Arthur",
