feat: use the built-in dark mode by tailwind

tailwind.config.js

@@ -9,14 +9,8 @@ module.exports = {
       './src/**/*.js',
       './src/**/*.ts',
     ],
-    options: {
-      whitelist: [
-        'schema-dark',
-      ],
-    },
   },
   theme: {
-    darkSelector: '.schema-dark',
     extend: {
       opacity: {
         10: '0.1',
@@ -26,22 +20,22 @@ module.exports = {
   },
   variants: {
     cursor: ['responsive', 'disabled'],
-    backgroundColor: ['dark', 'dark-hover', 'dark-group-hover', 'hover', 'disabled'],
-    borderColor: ['dark', 'dark-disabled', 'dark-focus', 'dark-active', 'active', 'focus', 'disabled'],
-    textColor: ['dark', 'dark-hover', 'dark-active', 'hover', 'active', 'disabled'],
+    backgroundColor: ['dark', 'hover', 'disabled'],
+    borderColor: ['dark', 'active', 'focus', 'disabled'],
+    textColor: ['dark', 'hover', 'active', 'disabled'],
     opacity: ['dark', 'hover', 'active', 'focus', 'disabled'],
   },
-  plugins: [
-    require('tailwindcss-dark-mode')(),
-  ],
   future: {
+    purgeLayersByDefault: true,
     removeDeprecatedGapUtilities: true,
   },
   experimental: {
+    darkModeVariant: true,
     applyComplexClasses: true,
     uniformColorPalette: true,
     extendedSpacingScale: true,
     defaultLineHeights: true,
     extendedFontSizeScale: true,
   },
+  dark: 'class',
 }