💄 Added Tailwindcss for styling

web/package.json

@@ -18,8 +18,11 @@
   "devDependencies": {
     "@types/adm-zip": "^0.4.34",
     "@types/react": "^17.0.37",
+    "autoprefixer": "^10.4.0",
     "eslint": "8.4.1",
     "eslint-config-next": "12.0.7",
+    "postcss": "^8.4.5",
+    "tailwindcss": "^3.0.6",
     "typescript": "^4.5.4"
   },
   "eslintConfig": {

web/pages/index.tsx

@@ -1,26 +1,26 @@
 import Link from 'next/link'
 
-import styles from 'styles/Home.module.css'
-
 const Home = () => {
   return (
-    <div className={styles.container}>
-      <main className={styles.main}>
-        <h1 className={styles.title}>
+    <div className="container px-8 mx-auto">
+      <main className="min-h-screen py-16 flex flex-col justify-center items-center">
+        <h1 className="text-6xl text-center font-extrabold">
           DfE Attendance Scraper
         </h1>
 
-        <p className={styles.description}>
+        <p className="text-2xl text-center my-16">
           API endpoints for obtaining attendance data scraped from the DfE&apos;s statistics website!
           <br /><br />
-          <strong>This website is not affiliated or associated with the DfE!</strong>
+          <span className="font-semibold">
+            This website is not affiliated or associated with the DfE!
+          </span>
         </p>
 
-        <div className={styles.grid}>
+        <div className="flex flex-col w-full sm:flex-row items-center justify-center flex-wrap max-w-3xl">
           <Link href="/api/daily" passHref>
-            <a className={styles.card}>
-              <h2>Daily Attendance &rarr;</h2>
-              <p>Daily attendance data for schools from Sep 2020 to present!</p>
+            <a className="m-4 p-6 text-left text-inherit no-underline border border-slate-200 max-w-xs rounded-lg hover:text-blue-600 hover:border-blue-600">
+              <h2 className="mb-4 text-2xl font-bold">Daily Attendance &rarr;</h2>
+              <p className="text-xl font-medium">Daily attendance data for schools from Sep 2020 to present!</p>
             </a>
           </Link>
         </div>

web/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

web/styles/globals.css

@@ -1,16 +1,3 @@
-html,
-body {
-  padding: 0;
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-* {
-  box-sizing: border-box;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

web/tailwind.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  content: ['./pages/**/*.tsx'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}