style: use Tailwind CSS (#655)

* style: use Tailwind CSS

* update yarn.lock

* fix style file path

* fix build error
* A nested style rule cannot start with 'thead' because it looks like the start of a declaration
* @import must precede all other statements

* fix style

* format files with prettier

.prettierrc.js → .prettierrc.cjs

@@ -3,4 +3,5 @@ module.exports = {
   semi: true,
   bracketSpacing: true,
   singleQuote: true,
+  plugins: ['prettier-plugin-tailwindcss']
 };

package.json

@@ -20,17 +20,14 @@
     "react-helmet-async": "^1.3.0",
     "react-map-gl": "^7.1.6",
     "react-router-dom": "^6.15.0",
-    "sass": "^1.52.3",
-    "sass-mq": "^6.0.0",
-    "tachyons": "^4.12.0",
-    "tachyons-sass-fork": "4.9.5",
     "viewport-mercator-project": "^7.0.4",
     "vite": "^4.3.9",
     "vite-plugin-svgr": "^3.2.0",
     "vite-tsconfig-paths": "^4.2.0"
   },
   "license": "MIT",
   "private": true,
+  "type": "module",
   "scripts": {
     "data:clean": "rm run_page/data.db {GPX,TCX,FIT}_OUT/* activities/* src/static/activities.json",
     "data:download:garmin": "python3 run_page/garmin_sync.py",
@@ -39,7 +36,7 @@
     "develop": "vite dev",
     "serve": "vite serve",
     "lint": "eslint --ext .ts,.tsx src --fix",
-    "check": "prettier --write src/main.tsx src/**/*.{scss,json,ts,tsx} *.{md,yaml,json,ts,js}",
+    "check": "prettier --write src/main.tsx src/**/*.{css,json,ts,tsx} *.{md,yaml,json,ts,js}",
     "ci": "pnpm run check && pnpm run lint && pnpm run build"
   },
   "engineStrict": true,
@@ -59,11 +56,15 @@
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
     "@typescript-eslint/parser": "^5.59.2",
+    "autoprefixer": "^10.4.19",
     "eslint": "^8.17.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
-    "prettier": "2.8.8",
+    "postcss": "^8.4.38",
+    "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.13",
+    "tailwindcss": "^3.4.3",
     "typescript": "^5.1.6"
   }
 }