From 22f4d23e8d945e40a0eb276cf2cc70a3b2fc5dc4 Mon Sep 17 00:00:00 2001
From: Alex Kern <alex@kern.io>
Date: Sun, 3 Aug 2025 21:49:40 -0700
Subject: [PATCH] Fix light/dark mode for TW v4 (#297)

---
 src/app/page.tsx   |  7 +++----
 src/styles.css     |  8 +++++++-
 tailwind.config.js | 13 -------------
 3 files changed, 10 insertions(+), 18 deletions(-)
 delete mode 100644 tailwind.config.js

diff --git a/src/app/page.tsx b/src/app/page.tsx
index bacdfa3..217f60c 100644
--- a/src/app/page.tsx
+++ b/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} />
diff --git a/src/styles.css b/src/styles.css
index 4a57778..926dc22 100644
--- a/src/styles.css
+++ b/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;
-}
\ No newline at end of file
+}
diff --git a/tailwind.config.js b/tailwind.config.js
deleted file mode 100644
index 788f1de..0000000
--- a/tailwind.config.js
+++ /dev/null
@@ -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',
-}