Add Tailwind

.gitignore

@@ -4,3 +4,4 @@ node_modules
 /.cache
 /server/build
 /public/build
+/app/tailwind.css

app/components/tournament/BracketActions.tsx

@@ -126,7 +126,6 @@ function DuringMatchActions({
         team.name
       ) && team.id !== ownTeam.id
   );
-  console.log({ teams, currentMatch });
   invariant(opponentTeam, "opponentTeam is undefined");
 
   if (joinedRoom) {

app/root.tsx

@@ -5,6 +5,7 @@ import type { LinksFunction, LoaderFunction } from "remix";
 import resetStyles from "~/styles/reset.css";
 import globalStyles from "~/styles/global.css";
 import layoutStyles from "~/styles/layout.css";
+import tailwindStyles from "./tailwind.css";
 import { Layout } from "./components/Layout";
 import { Catcher } from "./components/Catcher";
 
@@ -18,6 +19,7 @@ export const links: LinksFunction = () => {
     { rel: "stylesheet", href: resetStyles },
     { rel: "stylesheet", href: globalStyles },
     { rel: "stylesheet", href: layoutStyles },
+    { rel: "stylesheet", href: tailwindStyles },
   ];
 };
 

app/routes/to/$organization.$tournament/bracket.$id.tsx

@@ -36,7 +36,8 @@ export default function BracketTabWrapper() {
   );
 
   return (
-    <div className="tournament-bracket__container">
+    /* TODO: should be able to go wider than container https://stackoverflow.com/questions/5581034/is-there-are-way-to-make-a-child-divs-width-wider-than-the-parent-div-using-css */
+    <div className="flex w-full flex-col gap-6">
       <BracketActions />
       <EliminationBracket
         bracketSide={data.winners}

app/styles/tournament-bracket.css

@@ -1,11 +1,3 @@
-/* TODO: should be able to go wider than container https://stackoverflow.com/questions/5581034/is-there-are-way-to-make-a-child-divs-width-wider-than-the-parent-div-using-css */
-.tournament-bracket__container {
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  gap: var(--s-6);
-}
-
 .tournament-bracket__elim__container {
   display: flex;
   width: 100%;

package.json

@@ -3,10 +3,12 @@
   "name": "sendou.ink",
   "version": "3.0.0",
   "scripts": {
-    "build": "remix build",
+    "build": "npm run build:css && remix build",
+    "build:css": "tailwindcss -o ./app/tailwind.css",
     "dev:remix": "remix watch",
     "dev:server": "cross-env NODE_ENV=development node --experimental-specifier-resolution=node --loader ts-node/esm -r tsconfig-paths/register server/index.ts",
-    "dev": "concurrently \"npm run dev:remix\" \"npm run dev:server\"",
+    "dev": "concurrently \"npm run dev:remix\" \"npm run dev:css\" \"npm run dev:server\"",
+    "dev:css": "tailwindcss -o ./app/tailwind.css --watch",
     "postinstall": "remix setup node",
     "gen": "npx prisma generate",
     "start": "cross-env NODE_ENV=production node server/index.js",
@@ -68,6 +70,7 @@
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-standard": "^24.0.0",
     "stylelint-order": "^5.0.0",
+    "tailwindcss": "^3.0.8",
     "ts-node": "^10.4.0",
     "tsconfig-paths": "^3.12.0",
     "tsm": "^2.2.1",

tailwind.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  content: ["./app/**/*.{ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  variants: {},
+  plugins: [],
+};