From 5712ec110a2d6f55c8b3d51c5a85aefb93161720 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 17 Jan 2023 21:24:11 -0600
Subject: [PATCH] Add tailwind.css

---
 app/soapbox/main.tsx        |  1 +
 app/styles/application.scss | 57 -------------------------------------
 app/styles/tailwind.css     | 55 +++++++++++++++++++++++++++++++++++
 3 files changed, 56 insertions(+), 57 deletions(-)
 create mode 100644 app/styles/tailwind.css

diff --git a/app/soapbox/main.tsx b/app/soapbox/main.tsx
index 9fcfd4595..0445daf6f 100644
--- a/app/soapbox/main.tsx
+++ b/app/soapbox/main.tsx
@@ -21,6 +21,7 @@ import 'react-datepicker/dist/react-datepicker.css';
 
 import '../soapbox/iframe';
 import '../styles/application.scss';
+import '../styles/tailwind.css';
 
 import './precheck';
 import { default as Soapbox } from './containers/soapbox';
diff --git a/app/styles/application.scss b/app/styles/application.scss
index f1d16b35f..0f3a0215f 100644
--- a/app/styles/application.scss
+++ b/app/styles/application.scss
@@ -35,63 +35,6 @@
 @import 'components/crypto-donate';
 @import 'components/aliases';
 @import 'components/icon';
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer utilities {
-  .break-word-nested > p {
-    word-break: break-word;
-  }
-
-  .shadow-inset {
-    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%);
-  }
-
-  .truncate-child > * {
-    @apply truncate;
-  }
-
-  .d-screen {
-    height: 100vh; // Backwards compatibility
-    /* stylelint-disable-next-line unit-no-unknown */
-    height: 100dvh;
-  }
-
-  .bg-gradient-light {
-    background: linear-gradient(
-      115deg,
-      rgba(0, 0, 0, 0) 0%,
-      rgba(0, 0, 0, 0) 20%,
-      rgba(var(--color-gradient-start) / 0.1) 35%,
-      rgba(var(--color-gradient-end) / 0.1) 70%,
-      rgba(0, 0, 0, 0) 80%,
-      rgba(0, 0, 0, 0) 100%
-    );
-  }
-
-  .bg-gradient-dark {
-    background: linear-gradient(
-      115deg,
-      rgba(0, 0, 0, 0) 0%,
-      rgba(0, 0, 0, 0) 30%,
-      rgba(var(--color-gradient-start) / 0.1) 45%,
-      rgba(var(--color-gradient-start) / 0.2) 55%,
-      rgba(0, 0, 0, 0) 70%,
-      rgba(0, 0, 0, 0) 100%
-    );
-  }
-
-  .bg-gradient-sm {
-    background: linear-gradient(
-      112deg,
-      rgba(var(--color-gradient-start) / 0.1) 0%,
-      rgba(var(--color-gradient-end) / 0.1) 50%
-    );
-  }
-}
-
 @import 'forms';
 @import 'utilities';
 @import 'components/datepicker';
diff --git a/app/styles/tailwind.css b/app/styles/tailwind.css
new file mode 100644
index 000000000..200b2ca67
--- /dev/null
+++ b/app/styles/tailwind.css
@@ -0,0 +1,55 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+  .break-word-nested > p {
+    word-break: break-word;
+  }
+
+  .shadow-inset {
+    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%);
+  }
+
+  .truncate-child > * {
+    @apply truncate;
+  }
+
+  .d-screen {
+    height: 100vh; /* Backwards compatibility */
+    /* stylelint-disable-next-line unit-no-unknown */
+    height: 100dvh;
+  }
+
+  .bg-gradient-light {
+    background: linear-gradient(
+      115deg,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 0) 20%,
+      rgba(var(--color-gradient-start) / 0.1) 35%,
+      rgba(var(--color-gradient-end) / 0.1) 70%,
+      rgba(0, 0, 0, 0) 80%,
+      rgba(0, 0, 0, 0) 100%
+    );
+  }
+
+  .bg-gradient-dark {
+    background: linear-gradient(
+      115deg,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 0) 30%,
+      rgba(var(--color-gradient-start) / 0.1) 45%,
+      rgba(var(--color-gradient-start) / 0.2) 55%,
+      rgba(0, 0, 0, 0) 70%,
+      rgba(0, 0, 0, 0) 100%
+    );
+  }
+
+  .bg-gradient-sm {
+    background: linear-gradient(
+      112deg,
+      rgba(var(--color-gradient-start) / 0.1) 0%,
+      rgba(var(--color-gradient-end) / 0.1) 50%
+    );
+  }
+}