Merge pull request #10 from lukdog/upate-tailwind

Tailwind update to v4

Author: lukdog

.github/workflows/pages.yml

@@ -71,7 +71,7 @@ jobs:
       - name: Build with Next.js
         run: ${{ steps.detect-package-manager.outputs.runner }} next build
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v1
+        uses: actions/upload-pages-artifact@v3
         with:
           path: ./out
 

components/herobanner.tsx

@@ -30,7 +30,7 @@ export default function HeroBanner({ titles, profilePicUrl }: HeroBannerProps) {
 
       <div className="-mr-30 relative mt-20 hidden w-full md:w-1/2 lg:block">
         <div className="w-3/4 ">
-          <Image src={profilePicUrl} height="1333" width="1000" alt="avatar" className="rounded shadow" />
+          <Image src={profilePicUrl} height="600" width="600" alt="avatar" className="rounded shadow" />
           <div className="mt-4 flex flex-row justify-between">
             <div className="flex flex-row space-x-4">
               <svg

package.json

@@ -8,7 +8,6 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "export": "next export",
     "prettier-format": "prettier --config .prettierrc './**/*.ts*' --write"
   },
   "dependencies": {
@@ -18,18 +17,18 @@
     "react-rough-notation": "^1.0.3"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.0.0",
     "@types/node": "18.6.5",
     "@types/react": "18.0.17",
     "@types/react-dom": "18.0.6",
-    "autoprefixer": "^10.4.12",
     "classnames": "^2.3.2",
     "eslint": "8.21.0",
     "eslint-config-next": "12.2.4",
     "husky": "^8.0.2",
     "postcss": "^8.4.31",
     "prettier": "^2.7.1",
-    "prettier-plugin-tailwindcss": "^0.2.1",
-    "tailwindcss": "^3.1.8",
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "tailwindcss": "^4.0.0",
     "typescript": "4.7.4"
   }
-}
+}

postcss.config.js

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 }

styles/globals.css

@@ -1,4 +1,21 @@
+@import 'tailwindcss';
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@config '../tailwind.config.js';
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}