Merge branch 'tailwind-index' into 'develop'

Add tailwind.css

See merge request soapbox-pub/soapbox!2191

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
+  "css.validate": false,
   "editor.insertSpaces": true,
   "editor.tabSize": 2,
   "files.associations": {
@@ -15,5 +16,6 @@
       "fileMatch": ["renovate.json"],
       "url": "https://docs.renovatebot.com/renovate-schema.json"
     }
-  ]
+  ],
+  "scss.validate": false
 }

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';

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';