Skip to content
This repository was archived by the owner on May 27, 2021. It is now read-only.

Commit 2c09037

Browse files
committed
Add variant for placeholder pseudo-selector
1 parent 0752799 commit 2c09037

File tree

4 files changed

+137
-74
lines changed

4 files changed

+137
-74
lines changed

README.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ Variants for dark mode are based on [Tailwind's own variants](https://tailwindcs
3030
- `dark-focus-within`
3131
- `dark-even`
3232
- `dark-odd`
33+
- `dark-placeholder`
3334

3435
... and are used in the same way.
3536

@@ -53,7 +54,7 @@ As with existing variants such as `hover` and `focus`, variants for dark mode mu
5354
variants: {
5455
backgroundColor: ['dark', 'dark-hover', 'dark-group-hover', 'dark-even', 'dark-odd'],
5556
borderColor: ['dark', 'dark-focus', 'dark-focus-within'],
56-
textColor: ['dark', 'dark-hover', 'dark-active']
57+
textColor: ['dark', 'dark-hover', 'dark-active', 'dark-placeholder']
5758
}
5859
```
5960

index.js

+6
Original file line numberDiff line numberDiff line change
@@ -48,5 +48,11 @@ module.exports = function() {
4848
return `${darkSelector} .${e(`dark-odd${separator}${className}`)}:nth-child(odd)`;
4949
});
5050
});
51+
52+
addVariant('dark-placeholder', ({modifySelectors, separator}) => {
53+
modifySelectors(({className}) => {
54+
return `${darkSelector} .${e(`dark-placeholder${separator}${className}`)}::placeholder`;
55+
});
56+
});
5157
};
5258
};

package-lock.json

+127-71
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)