Migrate App stylesheets to tailwind

src/app/App.scss

@@ -1,26 +0,0 @@
-@use '../../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
-
-.app-container {
-  height: 100%;
-}
-
-.app {
-  padding-top: base.$headerHeight;
-  height: 100%;
-}
-
-.shlink-wrapper {
-  min-height: 100%;
-  padding-bottom: base.$footer-height + base.$footer-margin;
-  margin-bottom: -(base.$footer-height + base.$footer-margin);
-}
-
-.shlink-footer {
-  height: base.$footer-height;
-  margin-top: base.$footer-margin;
-  padding: 0;
-
-  @media (min-width: base.$mdMin) {
-    padding: 0 15px;
-  }
-}

src/app/App.tsx

@@ -10,7 +10,6 @@ import type { FCWithDeps } from '../container/utils';
 import { componentFactory, useDependencies } from '../container/utils';
 import type { ServersMap } from '../servers/data';
 import { forceUpdate } from '../utils/helpers/sw';
-import './App.scss';
 
 type AppProps = {
   fetchServers: () => void;
@@ -62,11 +61,16 @@ const App: FCWithDeps<AppProps, AppDeps> = (
   }, [settings.ui?.theme]);
 
   return (
-    <div className="container-fluid app-container">
+    <div className="tw:px-3 tw:h-full">
       <MainHeader />
 
-      <div className="app">
-        <div className={clsx('shlink-wrapper', { 'd-flex align-items-center pt-3': isHome })}>
+      <div className="tw:h-full tw:pt-(--header-height)">
+        <div
+          className={clsx(
+            'tw:min-h-full tw:pb-[calc(var(--footer-height)+var(--footer-margin))] tw:-mb-[calc(var(--footer-height)+var(--footer-margin))]',
+            { 'tw:flex tw:items-center tw:pt-4': isHome },
+          )}
+        >
           <Routes>
             <Route index element={<Home />} />
             <Route path="/settings">
@@ -82,7 +86,7 @@ const App: FCWithDeps<AppProps, AppDeps> = (
           </Routes>
         </div>
 
-        <div className="shlink-footer">
+        <div className="tw:h-(--footer-height) tw:mt-(--footer-margin) tw:md:px-4">
           <ShlinkVersionsContainer />
         </div>
       </div>

src/tailwind.css

@@ -18,6 +18,9 @@
 @layer base {
     :root {
         --header-height: 56px;
+        --footer-height: 2.3rem;
+        --footer-margin: .8rem;
+
         /* Width of ShlinkWebComponent's side menu when not collapsed */
         --aside-menu-width: 260px;
     }