Add Tailwind to React app

As described at https://tailwindcss.com/docs/guides/create-react-app;
using existing Tailwind config from Rails app (with `purge` paths
modified).

client/craco.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  style: {
+    postcss: {
+      plugins: [require("tailwindcss"), require("autoprefixer")],
+    },
+  },
+};

client/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "proxy": "http://127.0.0.1:3000",
   "dependencies": {
+    "@craco/craco": "^6.1.1",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
@@ -18,9 +19,9 @@
     "web-vitals": "^1.0.1"
   },
   "scripts": {
-    "start": "PORT=3001 react-scripts start",
-    "build": "react-scripts build && cp -r build/* ../public/",
-    "test": "react-scripts test",
+    "start": "PORT=3001 craco start",
+    "build": "craco build && cp -r build/* ../public/",
+    "test": "craco test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -40,5 +41,11 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss7-compat": "^2.1.0",
+    "autoprefixer": "^9",
+    "postcss": "^7",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat"
   }
 }

client/src/index.css

@@ -1,13 +1,29 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.card {
+  @apply flex flex-col w-full px-2 pb-2 overflow-hidden border-4 shadow-lg;
+}
+
+@screen md {
+  .card {
+    @apply w-1/3 border-2;
+  }
+}
+
+@screen lg {
+  .card {
+    @apply w-1/4;
+  }
+}
+
+@screen xl {
+  .card {
+    @apply w-1/5;
+  }
+}
+
+.tag-pill {
+  @apply inline-block px-2 my-1 mr-2 font-semibold rounded-full;
 }

client/tailwind.config.js

@@ -0,0 +1,26 @@
+const defaultTheme = require("tailwindcss/defaultTheme");
+
+module.exports = {
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ["Inter", ...defaultTheme.fontFamily.sans],
+      },
+    },
+  },
+  variants: {
+    backgroundColor: ["responsive", "hover", "focus", "disabled"],
+    cursor: ["responsive", "disabled"],
+    opacity: ["responsive", "hover", "focus", "disabled"],
+  },
+  plugins: [],
+  purge: [
+    "./src/**/*.{js,jsx,ts,tsx,css}",
+    "./public/index.html",
+    "../**/*.rb",
+  ],
+  future: {
+    removeDeprecatedGapUtilities: true,
+    purgeLayersByDefault: true,
+  },
+};