Skip to content

Commit

Permalink
πŸ“„ docs: add the upcoming experimental darkModeVariant to the themin…
Browse files Browse the repository at this point in the history
…g plugin comparison table (#5)
  • Loading branch information
JNavith committed Sep 1, 2020
1 parent 70530dc commit a44858d
Showing 1 changed file with 10 additions and 1 deletion.
11 changes: 10 additions & 1 deletion README.md
Expand Up @@ -935,6 +935,7 @@ Both because there are many theme plugins for Tailwind CSS, and because *what's
<tr>
<th></th>
<th><a href="https://tailwindcss.com/docs/breakpoints/#dark-mode">Native screens</a></th>
<th><a href="https://github.com/tailwindlabs/tailwindcss/pull/2279">Experimental <code>darkModeVariant</code></a></th>
<th><a href="https://github.com/ChanceArthur/tailwindcss-dark-mode">tailwindcss-dark-mode</a></th>
<th><a href="https://github.com/danestves/tailwindcss-darkmode">tailwindcss-darkmode</a></th>
<th><a href="https://github.com/estevanmaito/tailwindcss-multi-theme">tailwindcss-multi-theme</a></th>
Expand All @@ -952,13 +953,15 @@ Both because there are many theme plugins for Tailwind CSS, and because *what's
<td>🟑</td>
<td>🟑</td>
<td>🟑</td>
<td>🟑</td>
<td>βœ…</td>
<td>❌</td>
<td>βœ…</td>
</tr>
<tr>
<th>Controllable with selectors (classes or data attributes)</th>
<td>❌</td>
<td>🟑</td>
<td>βœ…</td>
<td>βœ…</td>
<td>βœ…</td>
Expand All @@ -974,6 +977,7 @@ Both because there are many theme plugins for Tailwind CSS, and because *what's
<td>❌</td>
<td>❌</td>
<td>❌</td>
<td>❌</td>
<td>βœ…</td>
<td>❌</td>
<td>βœ…</td>
Expand All @@ -988,10 +992,12 @@ Both because there are many theme plugins for Tailwind CSS, and because *what's
<td>βœ…</td>
<td>βœ…</td>
<td>βœ…</td>
<td>βœ…</td>
</tr>
<tr>
<th>Stacked variants like <code>hover</code></a></th>
<td>βœ…</td>
<td>βœ…</td>
<td>🟑</td>
<td>🟑</td>
<td>🟑</td>
Expand All @@ -1003,6 +1009,7 @@ Both because there are many theme plugins for Tailwind CSS, and because *what's
<tr>
<th>Supports <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme"><code>prefers-color-scheme: dark</code></a></th>
<td>βœ…</td>
<td>🟑</td>
<td>❌</td>
<td>❌</td>
<td>❌</td>
Expand All @@ -1018,6 +1025,7 @@ Both because there are many theme plugins for Tailwind CSS, and because *what's
<td>❌</td>
<td>❌</td>
<td>❌</td>
<td>❌</td>
<td>βœ…</td>
<td>βœ…</td>
<td>βœ…</td>
Expand All @@ -1029,6 +1037,7 @@ Both because there are many theme plugins for Tailwind CSS, and because *what's
<td>❌</td>
<td>❌</td>
<td>❌</td>
<td>❌</td>
<td>βœ…</td>
<td>βœ…</td>
<td>❌</td>
Expand Down Expand Up @@ -1087,7 +1096,7 @@ Plugins that have a 🟑 support only some of the variants in Tailwind's core, a
2. It could still be possible for a flash of unthemed content to appear before the appropriate theme is activated
3. Your site will immediately jump between light and dark instead of smoothly transitioning with the rest of the screen on macOS

**[`tailwindcss-prefers-dark-mode`](https://github.com/javifm86/tailwindcss-prefers-dark-mode)**: cannot use selectors and media queries at the same time; it's one or the other, so you have to put a βœ… in one row and ❌ in the other.
**[`tailwindcss-prefers-dark-mode`](https://github.com/javifm86/tailwindcss-prefers-dark-mode)** and **[experimental `darkModeVariant`](https://github.com/tailwindlabs/tailwindcss/pull/2279)**: cannot use selectors and media queries at the same time; it's one or the other, so you have to put a βœ… in one row and ❌ in the other.


# πŸ“„ License and Contributing
Expand Down

0 comments on commit a44858d

Please sign in to comment.