Merge pull request #310 from pennlabs/jonx/add-tailwindcss

add tailwind css to frontend

.github/workflows/build-and-deploy.yaml

@@ -45,13 +45,12 @@ jobs:
           cache-to: type=local,dest=/tmp/.buildx-cache
           tags: pennlabs/penn-mobile-backend:latest,pennlabs/penn-mobile-backend:${{ github.sha }}
           outputs: type=docker,dest=/tmp/image.tar
-      - uses: actions/upload-artifact@v2
+      - uses: actions/upload-artifact@v4
         with:
           name: build-backend
           path: /tmp/image.tar
     needs: backend-check
 
-
   build-frontend:
     name: Build frontend
     runs-on: ubuntu-latest
@@ -74,7 +73,7 @@ jobs:
           cache-to: type=local,dest=/tmp/.buildx-cache
           tags: pennlabs/penn-mobile-frontend:latest,pennlabs/penn-mobile-frontend:${{ github.sha }}
           outputs: type=docker,dest=/tmp/image.tar
-      - uses: actions/upload-artifact@v2
+      - uses: actions/upload-artifact@v4
         with:
           name: build-frontend
           path: /tmp/image.tar
@@ -86,8 +85,8 @@ jobs:
     if: github.ref == 'refs/heads/master'
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/download-artifact@v2
-      - uses: geekyeggo/delete-artifact@v1
+      - uses: actions/download-artifact@v4
+      - uses: geekyeggo/delete-artifact@v5
         with:
           name: |-
             build-backend

frontend/next.config.js

@@ -4,6 +4,7 @@ module.exports = {
 }
 
 const withImages = require('next-images')
+
 module.exports = withImages()
 
 module.exports = {

frontend/package.json

@@ -6,7 +6,7 @@
     "dev": "NODE_ENV=development node server.js",
     "build": "next build",
     "start": "NODE_ENV=production node server.js",
-    "lint": "eslint . --ext .tsx --ext .ts && tsc -b tsconfig.json",
+    "lint": "eslint -c .eslintrc.json . && tsc -b tsconfig.json",
     "test": "echo no tests yet",
     "codecov": "echo no codecov"
   },
@@ -35,22 +35,25 @@
     "styled-components": "^5.3.1",
     "swr": "^1.3.0",
     "typescript": "^4.4.4",
-    "url-loader": "^4.1.1"
+    "url-loader": "^4.1.1",
+    "eslint": "^8",
+    "tailwindcss": "^3.4.13",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.47"
   },
   "devDependencies": {
     "@types/node": "^16.11.1",
     "@typescript-eslint/eslint-plugin": "^5.0.0",
     "@typescript-eslint/parser": "^5.1.0",
     "babel-eslint": "^10.1.0",
     "babel-plugin-styled-components": "^1.13.3",
-    "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-next": "11.1.2",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-react-app": "^6.0.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-import-resolver-typescript": "^2.5.0",
-    "eslint-plugin-flowtype": "^6.1.0",
+    "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-prettier": "^4.0.0",
     "prettier": "^2.4.1"
   }

frontend/postcss.config.js

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

frontend/stylesheets/globals.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 @import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;350;400;500;600&display=swap');
 @import url('https://rsms.me/inter/inter.css');
 @import '~antd/dist/antd.css';
@@ -46,4 +50,4 @@ p {
 
 img {
   vertical-align: initial;
-}
+}

frontend/tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}