Fix light/dark mode for TW v4

src/app/page.tsx

@@ -38,10 +38,6 @@ function InitialState({
     <PageWrapper>
       <div className="flex flex-col items-center space-y-1 max-w-md">
         <TitleText>Peer-to-peer file transfers in your browser.</TitleText>
-        <SubtitleText>
-          Leave this tab open—FilePizza is peer to peer and never stores your
-          files.
-        </SubtitleText>
       </div>
       <DropZone onDrop={onDrop} />
       <TermsAcceptance />
@@ -110,6 +106,9 @@ function UploadingState({
       <TitleText>
         You are uploading {pluralize(uploadedFiles.length, 'file', 'files')}.
       </TitleText>
+      <SubtitleText>
+        Leave this tab open. FilePizza does not store files.
+      </SubtitleText>
       <UploadFileList files={fileListData} />
       <WebRTCPeerProvider>
         <Uploader files={uploadedFiles} password={password} onStop={onStop} />

src/styles.css

@@ -1,5 +1,11 @@
 @import 'tailwindcss';
 
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --animate-spin-slow: spin 16s linear infinite;
+}
+
 html {
   height: 100dvh;
 }
@@ -12,4 +18,4 @@ body {
   display: flex;
   flex-direction: column;
   height: 100dvh;
-}
+}

tailwind.config.js

@@ -1,13 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
-  theme: {
-    extend: {
-      animation: {
-        'spin-slow': 'spin 16s linear infinite',
-      },
-    },
-  },
-  plugins: [],
-  darkMode: 'class',
-}