diff --git a/README.md b/README.md index 3370c52..fd66811 100644 --- a/README.md +++ b/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'] } ``` diff --git a/index.js b/index.js index 17f0a63..2d7f645 100644 --- a/index.js +++ b/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)`; }); }); }; diff --git a/package.json b/package.json index ee12c02..7fdc033 100644 --- a/package.json +++ b/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",