Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/danestves/tailwindcss-darkmode
Tailwind CSS plugin that adds variants for DarkMode
https://github.com/danestves/tailwindcss-darkmode
Last synced: 13 days ago
JSON representation
Tailwind CSS plugin that adds variants for DarkMode
- Host: GitHub
- URL: https://github.com/danestves/tailwindcss-darkmode
- Owner: danestves
- License: mit
- Archived: true
- Fork: true (javifm86/tailwindcss-prefers-dark-mode)
- Created: 2019-12-18T15:50:41.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2020-11-17T05:47:29.000Z (almost 4 years ago)
- Last Synced: 2024-08-01T17:21:53.273Z (3 months ago)
- Language: JavaScript
- Homepage:
- Size: 55.7 KB
- Stars: 15
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Tailwindcss DarkMode
Tailwind CSS plugin that adds variants for DarkMode.
[](https://www.npmjs.com/package/@danestves/tailwindcss-darkmode)
[](https://es.wikipedia.org/wiki/Licencia_MIT)
[](https://travis-ci.com/danestves/tailwindcss-darkmode)
## Installation
```
# npm
npm install @danestves/tailwindcss-darkmode --save-dev
# yarn
yarn add --dev @danestves/tailwindcss-darkmode
```
Add the plugin to the `plugins` array in your `tailwind.config.js` file.
```js
module.exports = {
// ...
plugins: [
// ...
require('@danestves/tailwindcss-darkmode')()
]
};
```
Actually the function receive two parameters:
- `prefix`: default to `dark`.
- `activatorClass`: default to `dark-mode`.
So if you want to rename the `activatorClass` you can make it as simple as:
```js
module.exports = {
// ...
plugins: [
// ...
require('@danestves/tailwindcss-darkmode')('dark', 'my-custom-activator-class')
]
};
```
## Variants generated
**Note:** _These variants are activated when either the `html` or `body` tag has the class `dark-mode`_. But you can change it.
- `dark`
- `dark:hover`
- `dark:focus`
- `dark:active`
- `dark:disabled`
- `dark:odd`
- `dark:even`
- `dark:group-hover`
- `dark:focus-within`
```html
```
🚨 Dark variants must be enabled on each utility in your `tailwind.config.js` file. 🚨
```js
variants: {
backgroundColor: [
"responsive",
"hover",
"focus",
"dark",
"dark:hover",
"dark:focus"
],
borderColor: [
"responsive",
"hover",
"focus",
"dark",
"dark:hover",
"dark:focus"
],
textColor: [
"responsive",
"hover",
"focus",
"group-hover",
"dark",
"dark:hover",
"dark:focus",
"dark:group-hover",
"focus-within",
"dark:focus-within",
"dark:odd",
"dark:even",
"dark:active",
"dark:disabled"
],
borderStyle: ["responsive", "dark"]
}
```
You can check the full list of default variants in the [Tailwind default config file][1].
## Customize class name prefix for variants
`dark` is used as default prefix for the variants that are generated. It´s possible to change `dark` for whatever you want, just pass any string as a param. For example, with `prefers-dark`:
```js
module.exports = {
// ...
plugins: [
// ...
require('tailwindcss-prefers-dark-mode')('prefers-dark')
]
};
```
And variants must be named with the new prefix:
```js
variants: {
textColor: [
'responsive',
'hover',
'focus',
'group-hover',
'prefers-dark',
'prefers-dark:hover',
'prefers-dark:focus',
'prefers-dark:group-hover',
'focus-within',
'prefers-dark:focus-within'
];
}
```
[1]: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js
[2]: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme