Rename dark-placeholder: to dark: for placeholderColor and new dark-divide for divideColor

README.md

@@ -31,6 +31,7 @@ Variants for dark mode are based on [Tailwind's own variants](https://tailwindcs
 - `dark-even`
 - `dark-odd`
 - `dark-placeholder`
+- `dark-divide`
 
 ... and are used in the same way.
 
@@ -54,7 +55,9 @@ As with existing variants such as `hover` and `focus`, variants for dark mode mu
 variants: {
   backgroundColor: ['dark', 'dark-hover', 'dark-group-hover', 'dark-even', 'dark-odd'],
   borderColor: ['dark', 'dark-focus', 'dark-focus-within'],
-  textColor: ['dark', 'dark-hover', 'dark-active', 'dark-placeholder']
+  textColor: ['dark', 'dark-hover', 'dark-active'],
+  placeholderColor: ['responsive', 'focus', 'dark-placeholder'],
+  divideColor: ['responsive', 'dark-divide']
 }
 ```
 

index.js

@@ -51,7 +51,13 @@ module.exports = function() {
 
     addVariant('dark-placeholder', ({modifySelectors, separator}) => {
       modifySelectors(({className}) => {
-        return `${darkSelector} .${e(`dark-placeholder${separator}${className}`)}::placeholder`;
+        return `${darkSelector} .${e(`dark${separator}${className}`)}::placeholder`;
+      });
+    });
+
+    addVariant('dark-divide', ({modifySelectors, separator}) => {
+      modifySelectors(({className}) => {
+        return `${darkSelector} .${e(`dark${separator}${className}`)} > :not(template) ~ :not(template)`;
       });
     });
   };

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tailwindcss-dark-mode",
   "description": "A Tailwind CSS plugin that adds variants for dark mode",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "author": "Chance Arthur",
   "license": "MIT",
   "copyright": "Chance Arthur",