Add tailwind

app/common/MainHeader.tsx

@@ -7,7 +7,7 @@ import { ShlinkLogo } from './ShlinkLogo';
 export const MainHeader: FC = () => (
   <Navbar color="primary" dark fixed="top" className="main-header" expand="md">
     <NavbarBrand tag={Link} to="/">
-      <ShlinkLogo className="main-header__brand-logo" color="white" /> Shlink
+      <ShlinkLogo className="tw-inline-block tw-mr-1 tw-w-[26px]" color="white" /> Shlink
     </NavbarBrand>
   </Navbar>
 );

app/index.scss

@@ -2,6 +2,7 @@
 @import 'node_modules/bootstrap/scss/bootstrap.scss';
 @import 'node_modules/@shlinkio/shlink-frontend-kit/dist/index'; // After bootstrap. Includes CSS overwrites
 @import 'node_modules/@shlinkio/shlink-web-component/dist/index';
+@import 'tailwind';
 
 .app {
   padding-top: $headerHeight;
@@ -15,8 +16,3 @@
     color: inherit !important;
   }
 }
-
-.main-header__brand-logo {
-  width: 26px;
-  margin-right: 5px;
-}

app/routes/login.tsx

@@ -44,8 +44,7 @@ export default function Login() {
   return (
     <form
       method="post"
-      className="d-flex flex-column gap-3 p-3 mt-5 mx-auto w-50 rounded-2 border-opacity-25 border-secondary"
-      style={{ borderWidth: '1px', borderStyle: 'solid' }}
+      className="tw-flex tw-flex-col tw-gap-4 tw-p-4 tw-mt-8 tw-mx-auto tw-w-[50%] tw-rounded-lg tw-border tw-border-gray-300"
     >
       <div>
         <label htmlFor={usernameId}>Username:</label>

app/tailwind.scss

@@ -0,0 +1,3 @@
+// @tailwind base; // Can't add this for now, as it overrides many styles from bootstrap
+@tailwind components;
+@tailwind utilities;