Tailwind CSS plugin that adds variants for @media (prefers-color-scheme: dark) or using an activator CSS class

By Javier Fernández
Last update: Sep 2, 2021
Comments: 9

Tailwindcss prefers dark mode

Tailwind CSS plugin that adds variants for @media (prefers-color-scheme: dark). It can also generate dark variants with an activator CSS class on the html, body or any parent tag making the dark classes active allowing easily switch between light and dark theme.

Installation

npm install tailwindcss-prefers-dark-mode --save-dev

Add the plugin to the plugins array in your tailwind.config.js file.

module.exports = {
  // ...

  plugins: [
    // ...
    require('tailwindcss-prefers-dark-mode')({
      type: 'mediaQuery', // 'mediaQuery' or 'class'
      className: '.dark-mode', // Activator css class if type === 'class'
      prefix: 'dark' // Class name prefix for naming dark variants
    })
  ]
};

Plugin params

You can customize how dark variants are generated depending on the params passed to the plugin. The old behaviour was passing no params or just an empty string. You can continue using the old config but passing an object is prefered. These are the different posibilities:

No params. If no param is supplied, variants will be under @media (prefers-color-scheme: dark) and the default prefix for classes will be dark.

require('tailwindcss-prefers-dark-mode')();

Passing an string. In this case variants will be generated under @media (prefers-color-scheme: dark) but the prefix for classes will be the string passed. For example, with prefers-dark:

require('tailwindcss-prefers-dark-mode')('prefers-dark');

Passing an object allows you to choose between generate variants with @media (prefers-color-scheme: dark) or generate with an activator CSS class. Object properties:
- type: mediaQuery if you want the option with @media (prefers-color-scheme: dark) or class if you prefer an activator CSS class. This field is required.
- className: The activator CSS class if type is class. If no className is provided, .dark-mode class will be used as default.
- prefix: Prefix for naming dark variants. If no prefix is provided, dark will be used as default.

require('tailwindcss-prefers-dark-mode')({
  type: 'class', // 'mediaQuery'
  className: '.dark-mode',
  prefix: 'dark'
});

Variants generated

dark
dark:hover
dark:focus
dark:active
dark:disabled
dark:odd
dark:even
dark:group-hover
dark:focus-within
dark:placeholder

<div class="bg-gray-100 dark:bg-gray-800 border-t-4 border-green-500">
  <nav class="flex flex-wrap justify-end items-center p-4">
    <a class="text-gray-700 hover:bg-gray-300 dark:hover:bg-transparent dark:focus:text-green-500" href="#">Text</a>
  </nav>
</div>

Dark variants must be enabled on each utility in your tailwind.config.js file.

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"],
    placeholderColor: ['responsive', 'focus', 'dark:placeholder']
  }

You can check the full list of default variants in Tailwind default config file.

Use @apply to inline any existing utility classes in dark mode

With @media (prefers-color-scheme: dark)

Just use prefers-color-scheme CSS media feature and apply Tailwind classes.

.btn {
  @apply font-bold py-2 px-4 rounded bg-red-500;
}

@media (prefers-color-scheme: dark) {
  .btn {
    @apply bg-gray-500;
  }
}

With activator CSS class

Just add the activator CSS class at the beggining of the selector and apply Tailwind classes.

.btn {
  @apply font-bold py-2 px-4 rounded bg-red-500;
}

.dark-mode .btn {
  @apply bg-gray-500;
}

Customize class name prefix for variants

dark is used as default prefix for variants generated. It´s possible to change dark for whatever you want, just pass any string as param or use prefix key if you pass an object as param to the plugin. For example, with prefers-dark:

module.exports = {
  // ...

  plugins: [
    // ...
    require('tailwindcss-prefers-dark-mode')('prefers-dark')
  ]
};

module.exports = {
  // ...

  plugins: [
    // ...
    require('tailwindcss-prefers-dark-mode')({
      type: 'class', // 'mediaQuery'
      className: '.dark-mode',
      prefix: 'prefers-dark'
    })
  ]
};

And variants must be named with the new prefix:

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'
  ];
}

Alternatives

If you're looking for a more complex approach, a different kind of configuration, or just want to know the alternatives, here is a list that you may find useful:

tailwindcss-theme-variants — A complete variant-based theming plugin.
tailwindcss-multi-theme — A simple, yet good alternative if you want to stick to variants.
tailwindcss-dark-mode - Another variant alternative.
tailwindcss-darkmode - Another variant alternative.
tailwindcss-theme-swapper - Similar to tailwindcss-theming, but lower-level, and without the variant functionality.
Manually, by adding a screens media query in Tailwind's configuration.

A more complete comparison of the different theming plugins can be found here.

Github

https://github.com/javifm86/tailwindcss-prefers-dark-mode

Comments(9)

1

Not possible to override custom colors with built in color
When extending the tailwind colors and using one the the custom colors, it is not possible to override with a built in color. For example the following does not work.
```
      classNames(
        'dark:border-my-custom-color', // using a built in color works
        {
          'dark:border-red-500': !isValid, // this has no effect
        }
      )
```
The workaround is to remove 'dark:border-my-custom-color', but I would expect it to be possible to override both built in and extended colors with either built in or extended colors.
2

Adding Activators and Updating Readme

This adds the ability to customize the activator class on the body. By default it is 'dark-mode' , but some people may like the option to change this.

First Param is the prefix to dark:mode or whatever you want it to be. cats:hover Second Param is the activator on the html or body tag. dark-mode or to stick with my above example cats

Default require(tailwindcss-darkmode)('dark', 'dark-mode') Custom require(tailwindcss-darkmode)('dark', 'cats')
3

Bump browserslist from 4.12.0 to 4.16.6
Bumps browserslist from 4.12.0 to 4.16.6.
Changelog

Sourced from browserslist's changelog.
4.16.6
- Fixed npm-shrinkwrap.json support in --update-db (by Geoff Newman).
4.16.5
- Fixed unsafe RegExp (by Yeting Li).
4.16.4
- Fixed unsafe RegExp.
- Added artifactory support to --update-db (by Ittai Baratz).
4.16.3
- Fixed --update-db.
4.16.2
- Fixed --update-db (by @ialarmedalien).
4.16.1
- Fixed Chrome 4 with mobileToDesktop (by Aron Woost).
4.16
- Add browserslist config query.
4.15
- Add TypeScript types (by Dmitry Semigradsky).
4.14.7
- Fixed Yarn Workspaces support to --update-db (by Fausto Núñez Alberro).
- Added browser changes to --update-db (by @AleksandrSl).
- Added color output to --update-db.
- Updated package.funding to have link to our Open Collective.
4.14.6
- Fixed Yarn support in --update-db (by Ivan Storck).
- Fixed npm 7 support in --update-db.
4.14.5
- Fixed last 2 electron versions query (by Sergey Melyukov).
4.14.4
- Fixed Unknown version 59 of op_mob error.
4.14.3
- Update Firefox ESR.
4.14.2
- Fixed --update-db on Windows (by James Ross).
- Improved --update-db output.
4.14.1
- Added --update-db explanation (by Justin Zelinsky).
... (truncated)
Commits
- 6fe3614 Release 4.16.6 version
- 33ebac9 Update dependencies
- 2128170 Add support for npm-shrinkwrap files alongside package-lock (#595)
- 7cc2aed Release 4.16.5 version
- 27e4afd Update dependencies
- 1013a18 Fix version RegExp
- b879a1a Use Node.js 16 on CI
- bd1e9e0 Fix ReDoS (#593)
- 209adf9 Release 4.16.4 version
- 3e2ae3b Fix types
- Additional commits viewable in compare view
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:
- @dependabot rebase will rebase this PR
- @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
- @dependabot merge will merge this PR after your CI passes on it
- @dependabot squash and merge will squash and merge this PR after your CI passes on it
- @dependabot cancel merge will cancel a previously requested merge and block automerging
- @dependabot reopen will reopen this PR if it is closed
- @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
- @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
- @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
- @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
- @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
You can disable automated security fix PRs for this repo from the Security Alerts page.
4

Bump postcss from 7.0.23 to 8.2.10
Bumps postcss from 7.0.23 to 8.2.10.
Release notes

Sourced from postcss's releases.
8.2.10
- Fixed ReDoS vulnerabilities in source map parsing.
- Fixed webpack 5 support (by @barak007).
- Fixed docs (by @roelandmoors).
8.2.9
- Exported NodeErrorOptions type (by @realityking)
8.2.8
- Fixed browser builds in webpack 5 (by @mattcompiles).
8.2.7
- Fixed browser builds in webpack 5 (by @mattcompiles).
8.2.6
- Fixed Maximum call stack size exceeded in Node#toJSON.
- Fixed docs (by @inokawa).
8.2.5
- Fixed escaped characters handling in list.split (by @nex3).
8.2.4
- Added plugin name to postcss.plugin() warning (by @Alphy11).
- Fixed docs (by @billcolumbia).
8.2.3
- Fixed JSON.stringify(Node[]) support (by @mischnic).
8.2.2
- Fixed CSS-in-JS support (by @43081j).
- Fixed plugin types (by @ludofischer).
- Fixed Result#warn() types.
8.2.1
- Fixed Node#toJSON() and postcss.fromJSON() (by @mischnic).
8.2 “Prince Orobas”

PostCSS 8.2 added a new API to serialize and deserialize CSS AST to JSON.
```
import { parse, fromJSON } from 'postcss'
let root = parse('a{}', { from: 'input.css' })
let json = root.toJSON()
// save to file, send by network, etc
let root2 = fromJSON(json)
```
... (truncated)
Changelog

Sourced from postcss's changelog.
8.2.10
- Fixed ReDoS vulnerabilities in source map parsing.
- Fixed webpack 5 support (by Barak Igal).
- Fixed docs (by Roeland Moors).
8.2.9
- Exported NodeErrorOptions type (by Rouven Weßling).
8.2.8
- Fixed browser builds in webpack 4 (by Matt Jones).
8.2.7
- Fixed browser builds in webpack 5 (by Matt Jones).
8.2.6
- Fixed Maximum call stack size exceeded in Node#toJSON.
- Fixed docs (by inokawa).
8.2.5
- Fixed escaped characters handling in list.split (by Natalie Weizenbaum).
8.2.4
- Added plugin name to postcss.plugin() warning (by Tom Williams).
- Fixed docs (by Bill Columbia).
8.2.3
- Fixed JSON.stringify(Node[]) support (by Niklas Mischkulnig).
8.2.2
- Fixed CSS-in-JS support (by James Garbutt).
- Fixed plugin types (by Ludovico Fischer).
- Fixed Result#warn() types.
8.2.1
- Fixed Node#toJSON() and postcss.fromJSON() (by Niklas Mischkulnig).
8.2 “Prince Orobas”
- Added Node#toJSON() and postcss.fromJSON() (by Niklas Mischkulnig).
8.1.14
- Fixed parser performance regression.
8.1.13
- Fixed broken AST after moving nodes in visitor API.
8.1.12
- Fixed Autoprefixer regression.
8.1.11
- Added PostCSS update suggestion on unknown event in plugin.
... (truncated)
Commits
- 8395d9f Release 8.2.10 version
- f2baaa7 Update ESLint config
- b6f3e4d Fix unsafe regexp in getAnnotationURL() too
- 4bcd727 Merge pull request #1553 from barak007/patch-2
- 7c2e97a Add covrage ignore on error paths
- 8c58434 Apply suggestions from code review
- ff2fd57 add error for sourcePath
- 8f02bdc disable url based features
- a54d020 Fix browser bundling with webpack 5
- 8682b1e Fix unsafe regexp
- Additional commits viewable in compare view
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:
- @dependabot rebase will rebase this PR
- @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
- @dependabot merge will merge this PR after your CI passes on it
- @dependabot squash and merge will squash and merge this PR after your CI passes on it
- @dependabot cancel merge will cancel a previously requested merge and block automerging
- @dependabot reopen will reopen this PR if it is closed
- @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
- @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
- @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
- @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
- @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
You can disable automated security fix PRs for this repo from the Security Alerts page.
5

Bump lodash from 4.17.19 to 4.17.21
Bumps lodash from 4.17.19 to 4.17.21.
Commits
- f299b52 Bump to v4.17.21
- c4847eb Improve performance of toNumber, trim and trimEnd on large input strings
- 3469357 Prevent command injection through _.template's variable option
- ded9bc6 Bump to v4.17.20.
- 63150ef Documentation fixes.
- 00f0f62 test.js: Remove trailing comma.
- 846e434 Temporarily use a custom fork of lodash-cli.
- 5d046f3 Re-enable Travis tests on 4.17 branch.
- aa816b3 Remove /npm-package.
- See full diff in compare view
Maintainer changes

This version was pushed to npm by bnjmnt4n, a new releaser for lodash since your current version.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:
- @dependabot rebase will rebase this PR
- @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
- @dependabot merge will merge this PR after your CI passes on it
- @dependabot squash and merge will squash and merge this PR after your CI passes on it
- @dependabot cancel merge will cancel a previously requested merge and block automerging
- @dependabot reopen will reopen this PR if it is closed
- @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
- @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
- @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
- @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
- @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
You can disable automated security fix PRs for this repo from the Security Alerts page.
6

Bump path-parse from 1.0.6 to 1.0.7
Bumps path-parse from 1.0.6 to 1.0.7.
Commits
- See full diff in compare view
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:
- @dependabot rebase will rebase this PR
- @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
- @dependabot merge will merge this PR after your CI passes on it
- @dependabot squash and merge will squash and merge this PR after your CI passes on it
- @dependabot cancel merge will cancel a previously requested merge and block automerging
- @dependabot reopen will reopen this PR if it is closed
- @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
- @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
- @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
- @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
- @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
You can disable automated security fix PRs for this repo from the Security Alerts page.
7

Bump lodash from 4.17.15 to 4.17.19
Bumps lodash from 4.17.15 to 4.17.19.

Release notes

Sourced from lodash's releases.

4.17.16
Commits
- d7fbc52 Bump to v4.17.19
- 2e1c0f2 Add npm-package
- 1b6c282 Bump to v4.17.18
- a370ac8 Bump to v4.17.17
- 1144918 Rebuild lodash and docs
- 3a3b0fd Bump to v4.17.16
- c84fe82 fix(zipObjectDeep): prototype pollution (#4759)
- e7b28ea Sanitize sourceURL so it cannot affect evaled code (#4518)
- 0cec225 Fix lodash.isEqual for circular references (#4320) (#4515)
- 94c3a81 Document matches* shorthands for over* methods (#4510) (#4514)
- Additional commits viewable in compare view
Maintainer changes

This version was pushed to npm by mathias, a new releaser for lodash since your current version.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:
- @dependabot rebase will rebase this PR
- @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
- @dependabot merge will merge this PR after your CI passes on it
- @dependabot squash and merge will squash and merge this PR after your CI passes on it
- @dependabot cancel merge will cancel a previously requested merge and block automerging
- @dependabot reopen will reopen this PR if it is closed
- @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
- @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
- @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
- @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
- @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
You can disable automated security fix PRs for this repo from the Security Alerts page.
8

Bump minimist from 1.2.5 to 1.2.6
Bumps minimist from 1.2.5 to 1.2.6.
Commits
- 7efb22a 1.2.6
- ef88b93 security notice for additional prototype pollution issue
- c2b9819 isConstructorOrProto adapted from PR
- bc8ecee test from prototype pollution PR
- See full diff in compare view
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:
- @dependabot rebase will rebase this PR
- @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
- @dependabot merge will merge this PR after your CI passes on it
- @dependabot squash and merge will squash and merge this PR after your CI passes on it
- @dependabot cancel merge will cancel a previously requested merge and block automerging
- @dependabot reopen will reopen this PR if it is closed
- @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
- @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
- @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
- @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
- @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
You can disable automated security fix PRs for this repo from the Security Alerts page.
9

Bump postcss from 7.0.23 to 7.0.36
Bumps postcss from 7.0.23 to 7.0.36.
Release notes

Sourced from postcss's releases.
7.0.36
- Backport ReDoS vulnerabilities from PostCSS 8.
7.0.35
- Add migration guide link to PostCSS 8 error text.
7.0.34
- Fix compatibility with postcss-scss 2.
7.0.33
- Add error message for PostCSS 8 plugins.
7.0.32
- Fix error message (by @admosity).
7.0.31
- Use only the latest source map annotation (by @emzoumpo).
7.0.30
- Fix TypeScript definition (by @nex3)
7.0.29
- Update Processor#version.
7.0.28
- Fix TypeScript definition (by @nex3).
7.0.27
- Fix TypeScript definition (by @nex3).
7.0.26
- Fix TypeScript definition (by @nex3)
7.0.25
- Fix absolute path support for Windows (by @tomrav)
7.0.24
- Fix TypeScript definition (by @keithamus).
Changelog

Sourced from postcss's changelog.
7.0.36
- Backport ReDoS vulnerabilities from PostCSS 8.
7.0.35
- Add migration guide link to PostCSS 8 error text.
7.0.34
- Fix compatibility with postcss-scss 2.
7.0.33
- Add error message for PostCSS 8 plugins.
7.0.36
- Backport ReDoS vulnerabilities from PostCSS 8.
7.0.35
- Add migration guide link to PostCSS 8 error text.
7.0.34
- Fix compatibility with postcss-scss 2.
7.0.33
- Add error message for PostCSS 8 plugins.
7.0.32
- Fix error message (by @admosity).
7.0.31
- Use only the latest source map annotation (by Emmanouil Zoumpoulakis).
7.0.30
- Fix TypeScript definition (by Natalie Weizenbaum).
7.0.29
- Update Processor#version.
7.0.28
- Fix TypeScript definition (by Natalie Weizenbaum).
7.0.27
- Fix TypeScript definition (by Natalie Weizenbaum).
7.0.26
- Fix TypeScript definition (by Natalie Weizenbaum).
7.0.25
- Fix absolute path support for Windows (by Tom Raviv).
7.0.24
- Fix TypeScript definition (by Keith Cirkel).
Commits
- 67e3d7b Release 7.0.36 version
- 54cbf3c Backport ReDoS vulnerabilities from PostCSS 8
- 12832f3 Release 7.0.35 version
- 4455ef6 Use OpenCollective in funding
- e867c79 Add migration guide to PostCSS 8 error
- 32a22a9 Release 7.0.34 version
- 2293982 Lock build targets
- 2c3a111 Release 7.0.33 version
- 4105f21 Use yaspeller instead of yaspeller-ci
- c8d02a0 Revert yaspeller-ci removal
- Additional commits viewable in compare view
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.
Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:
- @dependabot rebase will rebase this PR
- @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
- @dependabot merge will merge this PR after your CI passes on it
- @dependabot squash and merge will squash and merge this PR after your CI passes on it
- @dependabot cancel merge will cancel a previously requested merge and block automerging
- @dependabot reopen will reopen this PR if it is closed
- @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
- @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
- @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
- @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
- @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
You can disable automated security fix PRs for this repo from the Security Alerts page.

Tailwind CSS plugin that adds variants for @media (prefers-color-scheme: dark) or using an activator CSS class

Tailwindcss prefers dark mode

Installation

Plugin params

Variants generated

Use @apply to inline any existing utility classes in dark mode

With @media (prefers-color-scheme: dark)

With activator CSS class

Customize class name prefix for variants

Alternatives

Github

Comments(9)

Not possible to override custom colors with built in color

Adding Activators and Updating Readme

Bump browserslist from 4.12.0 to 4.16.6

4.16.6

4.16.5

4.16.4

4.16.3

4.16.2

4.16.1

4.16

4.15

4.14.7

4.14.6

4.14.5

4.14.4

4.14.3

4.14.2

4.14.1

Bump postcss from 7.0.23 to 8.2.10

8.2.10

8.2.9

8.2.8

8.2.7

8.2.6

8.2.5

8.2.4

8.2.3

8.2.2

8.2.1

8.2 “Prince Orobas”

8.2.10

8.2.9

8.2.8

8.2.7

8.2.6

8.2.5

8.2.4

8.2.3

8.2.2

8.2.1

8.2 “Prince Orobas”

8.1.14

8.1.13

8.1.12

8.1.11

Bump lodash from 4.17.19 to 4.17.21

Bump path-parse from 1.0.6 to 1.0.7

Bump lodash from 4.17.15 to 4.17.19

4.17.16

Bump minimist from 1.2.5 to 1.2.6

Bump postcss from 7.0.23 to 7.0.36

7.0.36

7.0.35

7.0.34

7.0.33

7.0.32

7.0.31

7.0.30

7.0.29

7.0.28

7.0.27

7.0.26

7.0.25

7.0.24

7.0.36

7.0.35

7.0.34

7.0.33