chore: for :is(.dark .tw-*)

Author: sonofmagic

apps/webpack5-vue3/src/components/HelloWorld.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="text-[#dc3b3b]">
-    hello world red
+  <div class="text-[#dc3b3b] dark:text-slate-400 bg-white dark:bg-slate-900 px-4 sm:px-3 md:px-5">
+    HelloWorld
   </div>
 </template>
 
@@ -20,15 +20,17 @@ export default defineComponent({
 h3 {
   margin: 40px 0 0;
 }
+
 ul {
   list-style-type: none;
   padding: 0;
 }
+
 li {
   display: inline-block;
   margin: 0 10px;
 }
+
 a {
   color: #42b983;
-}
-</style>
+}</style>

apps/webpack5-vue3/tailwind.config.js

@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ['./src/**/*.{js,ts,jsx,tsx,vue}'],
+  darkMode: 'class',
   theme: {
     extend: {}
   },