Skip to content

Commit a44858d

Browse files
committed
📄 docs: add the upcoming experimental darkModeVariant to the theming plugin comparison table (#5)
1 parent 70530dc commit a44858d

File tree

1 file changed

+10
-1
lines changed

1 file changed

+10
-1
lines changed

README.md

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -935,6 +935,7 @@ Both because there are many theme plugins for Tailwind CSS, and because *what's
935935
<tr>
936936
<th></th>
937937
<th><a href="https://tailwindcss.com/docs/breakpoints/#dark-mode">Native screens</a></th>
938+
<th><a href="https://github.com/tailwindlabs/tailwindcss/pull/2279">Experimental <code>darkModeVariant</code></a></th>
938939
<th><a href="https://github.com/ChanceArthur/tailwindcss-dark-mode">tailwindcss-dark-mode</a></th>
939940
<th><a href="https://github.com/danestves/tailwindcss-darkmode">tailwindcss-darkmode</a></th>
940941
<th><a href="https://github.com/estevanmaito/tailwindcss-multi-theme">tailwindcss-multi-theme</a></th>
@@ -952,13 +953,15 @@ Both because there are many theme plugins for Tailwind CSS, and because *what's
952953
<td>🟡</td>
953954
<td>🟡</td>
954955
<td>🟡</td>
956+
<td>🟡</td>
955957
<td>✅</td>
956958
<td>❌</td>
957959
<td>✅</td>
958960
</tr>
959961
<tr>
960962
<th>Controllable with selectors (classes or data attributes)</th>
961963
<td>❌</td>
964+
<td>🟡</td>
962965
<td>✅</td>
963966
<td>✅</td>
964967
<td>✅</td>
@@ -974,6 +977,7 @@ Both because there are many theme plugins for Tailwind CSS, and because *what's
974977
<td>❌</td>
975978
<td>❌</td>
976979
<td>❌</td>
980+
<td>❌</td>
977981
<td>✅</td>
978982
<td>❌</td>
979983
<td>✅</td>
@@ -988,10 +992,12 @@ Both because there are many theme plugins for Tailwind CSS, and because *what's
988992
<td>✅</td>
989993
<td>✅</td>
990994
<td>✅</td>
995+
<td>✅</td>
991996
</tr>
992997
<tr>
993998
<th>Stacked variants like <code>hover</code></a></th>
994999
<td>✅</td>
1000+
<td>✅</td>
9951001
<td>🟡</td>
9961002
<td>🟡</td>
9971003
<td>🟡</td>
@@ -1003,6 +1009,7 @@ Both because there are many theme plugins for Tailwind CSS, and because *what's
10031009
<tr>
10041010
<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>
10051011
<td>✅</td>
1012+
<td>🟡</td>
10061013
<td>❌</td>
10071014
<td>❌</td>
10081015
<td>❌</td>
@@ -1018,6 +1025,7 @@ Both because there are many theme plugins for Tailwind CSS, and because *what's
10181025
<td>❌</td>
10191026
<td>❌</td>
10201027
<td>❌</td>
1028+
<td>❌</td>
10211029
<td>✅</td>
10221030
<td>✅</td>
10231031
<td>✅</td>
@@ -1029,6 +1037,7 @@ Both because there are many theme plugins for Tailwind CSS, and because *what's
10291037
<td>❌</td>
10301038
<td>❌</td>
10311039
<td>❌</td>
1040+
<td>❌</td>
10321041
<td>✅</td>
10331042
<td>✅</td>
10341043
<td>❌</td>
@@ -1087,7 +1096,7 @@ Plugins that have a 🟡 support only some of the variants in Tailwind's core, a
10871096
2. It could still be possible for a flash of unthemed content to appear before the appropriate theme is activated
10881097
3. Your site will immediately jump between light and dark instead of smoothly transitioning with the rest of the screen on macOS
10891098

1090-
**[`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.
1099+
**[`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.
10911100

10921101

10931102
# 📄 License and Contributing

0 commit comments

Comments
 (0)