chore: upgrade dependencies

app/globals.css

@@ -1,15 +1,43 @@
-@tailwind base;
+@import 'tailwindcss';
-@tailwind components;
-@tailwind utilities;
 
-@layer utilities {
+@custom-variant dark (&:is(.dark *));
-  .text-balance {
+
+@theme {
+  --breakpoint-*: initial;
+  --breakpoint-xs: 440px;
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1536px;
+
+  --text-xxs: 0.625rem;
+}
+
+/*
+  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);
+  }
+}
+
+@utility text-balance {
   text-wrap: balance;
-  }
+}
 
-  .text-shadow {
+@utility text-shadow {
   text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  }
 }
 
 .title-highlight {
@@ -118,3 +146,7 @@ input[type='checkbox']:focus + .checkbox {
   opacity: 20%;
   animation: fadeInOut 4s ease-in-out infinite;
 }
+
+button {
+  cursor: pointer;
+}

app/page.tsx

@@ -30,7 +30,7 @@ export default async function Home() {
           <Hero />
 
           <div className="text-shadow py-16 lg:my-24">
-            <h2 className="mx-auto max-w-screen-xs text-center text-2xl font-extrabold md:max-w-none md:text-3xl">
+            <h2 className="mx-auto max-w-(--breakpoint-xs) text-center text-2xl font-extrabold md:max-w-none md:text-3xl">
               Suosituimmat keskustelunaiheet tänään
             </h2>
 

components/BottomFade.tsx

@@ -1,5 +1,5 @@
 export default function BottomFade() {
   return (
-    <div className="pointer-events-none fixed bottom-0 left-0 right-0 z-50 h-32 bg-gradient-to-t from-[#070b1e] to-black/0"></div>
+    <div className="pointer-events-none fixed right-0 bottom-0 left-0 z-50 h-32 bg-linear-to-t from-[#070b1e] to-black/0"></div>
   );
 }

components/ChannelGrid.tsx

@@ -4,18 +4,18 @@ const DELAYS = shuffle([0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0, 1.1
 
 export default function ChannelGrid({ channels }: { channels: Channel[] }) {
   return (
-    <div className="mt-8 grid gap-3 rounded-3xl border-t border-t-pink-100/10 bg-gradient-to-b from-black/10 to-black/0 p-6 backdrop-blur-sm xs:grid-cols-2 sm:grid-cols-3 md:grid-cols-4 md:p-12">
+    <div className="xs:grid-cols-2 mt-8 grid gap-3 rounded-3xl border-t border-t-pink-100/10 bg-linear-to-b from-black/10 to-black/0 p-6 backdrop-blur-xs sm:grid-cols-3 md:grid-cols-4 md:p-12">
       {channels.map((channel, i) => (
         <div key={channel.id} className="relative h-[5.5rem]">
           <div
-            className="fade-in-out absolute bottom-0 left-0 right-0 top-0 z-0 rounded-[9px] bg-fuchsia-200/40"
+            className="fade-in-out absolute top-0 right-0 bottom-0 left-0 z-0 rounded-[9px] bg-fuchsia-200/40"
             style={{
               WebkitMask: 'linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0))',
               animationDelay: `${DELAYS[i] * 2}s`,
             }}
           ></div>
           <div
-            className="absolute bottom-0 left-0 right-0 top-0 z-10 m-px rounded-[8px] bg-[#2c0c33]"
+            className="absolute top-0 right-0 bottom-0 left-0 z-10 m-px rounded-[8px] bg-[#2c0c33]"
             style={{ WebkitMask: 'linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,0))' }}
           ></div>
           <div className="relative z-20 flex flex-col items-center justify-center gap-1 px-3 py-6 font-mono">

components/FeatureImage.tsx

@@ -14,7 +14,7 @@ export default function FeatureImage({
   return (
     <div className="relative rounded-[18px] p-px shadow-2xl">
       <div
-        className="fade-in-out absolute bottom-0 left-0 right-0 top-0 z-0 rounded-[17px] bg-gradient-to-tr from-[#4d094e] to-pink-500/70 p-[2px]"
+        className="fade-in-out absolute top-0 right-0 bottom-0 left-0 z-0 rounded-[17px] bg-linear-to-tr from-[#4d094e] to-pink-500/70 p-[2px]"
         style={{
           WebkitMask: 'linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0))',
           animationDelay: `${Math.floor(Math.random() * 5) + 1 * 0.5}s`,

components/Form.tsx

@@ -93,12 +93,12 @@ export default function Form() {
           </h2>
 
           <div className="mx-auto my-5 max-w-[300px] gap-2 space-y-2 sm:grid sm:max-w-none sm:grid-cols-4 sm:space-y-0">
-            <div className="col-span-3 flex rounded-[5px] bg-gradient-to-b from-fuchsia-50/30 to-fuchsia-800/50 md:rounded-[9px]">
+            <div className="col-span-3 flex rounded-[5px] bg-linear-to-b from-fuchsia-50/30 to-fuchsia-800/50 md:rounded-[9px]">
               <input
                 type="email"
                 name="email"
                 required
-                className={`m-px block grow rounded bg-gradient-to-b from-[#0b0b21] to-[#1e092e] px-3 py-2 text-fuchsia-100 placeholder:text-fuchsia-100/25 md:rounded-lg md:px-4 md:py-4 lg:px-5 lg:py-5 lg:text-lg ${isSubmitting ? 'opacity-75' : ''}`}
+                className={`m-px block grow rounded-sm bg-linear-to-b from-[#0b0b21] to-[#1e092e] px-3 py-2 text-fuchsia-100 placeholder:text-fuchsia-100/25 md:rounded-lg md:px-4 md:py-4 lg:px-5 lg:py-5 lg:text-lg ${isSubmitting ? 'opacity-75' : ''}`}
                 placeholder="minna.meikalainen@example.org"
                 tabIndex={1}
               />
@@ -107,23 +107,23 @@ export default function Form() {
               <button
                 tabIndex={3}
                 type="submit"
-                className="text-shadow bg-button block h-full w-full rounded border border-pink-400 border-b-pink-600 border-t-pink-300 px-3 py-2 font-bold sm:text-base md:rounded-lg md:px-4 md:py-4 lg:px-5 lg:py-5 lg:text-lg"
+                className="text-shadow bg-button block h-full w-full rounded-sm border border-pink-400 border-t-pink-300 border-b-pink-600 px-3 py-2 font-bold sm:text-base md:rounded-lg md:px-4 md:py-4 lg:px-5 lg:py-5 lg:text-lg"
               >
                 {isSubmitting ? <Spinner /> : 'Liity'}
               </button>
             </div>
           </div>
 
-          <label className="flex select-none flex-wrap items-center justify-center gap-2 font-mono text-xxs sm:text-xs">
+          <label className="text-xxs flex flex-wrap items-center justify-center gap-2 font-mono select-none sm:text-xs">
             <div className="relative h-5 w-5">
               <input
                 type="checkbox"
                 name="terms"
                 required
-                className="h-3 w-3 opacity-5 focus:outline-none"
+                className="h-3 w-3 opacity-5 focus:outline-hidden"
                 tabIndex={2}
               />
-              <div className="checkbox absolute left-0 top-0 flex h-full w-full items-center justify-center rounded border border-white bg-transparent transition-colors">
+              <div className="checkbox absolute top-0 left-0 flex h-full w-full items-center justify-center rounded-sm border border-white bg-transparent transition-colors">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-5 w-5">
                   <path
                     fillRule="evenodd"
@@ -159,7 +159,7 @@ export default function Form() {
 
       {message && (
         <>
-          <div className="text-shadow text-balance rounded-2xl border-t border-t-pink-100/10 bg-gradient-to-b from-black/20 to-black/0 p-10 text-center font-mono text-sm backdrop-blur-sm">
+          <div className="text-shadow rounded-2xl border-t border-t-pink-100/10 bg-linear-to-b from-black/20 to-black/0 p-10 text-center font-mono text-sm text-balance backdrop-blur-xs">
             {message}
           </div>
           {isSuccess && (

components/Hero.tsx

@@ -3,7 +3,7 @@ import Form from './Form';
 export default function Hero() {
   return (
     <div className="text-shadow mx-auto flex flex-col items-center justify-center" id="liity">
-      <h1 className="my-14 text-center text-2xl font-extrabold leading-tight sm:max-w-[80%] sm:text-3xl md:my-24 md:text-4xl lg:my-32 lg:text-5xl">
+      <h1 className="my-14 text-center text-2xl leading-tight font-extrabold sm:max-w-[80%] sm:text-3xl md:my-24 md:text-4xl lg:my-32 lg:text-5xl">
         Koodiklinikka on Suomen suurin <span className="title-highlight">ohjelmistoalan yhteisö</span>, joka tuo alan
         ammattilaiset ja harrastajat yhteen
       </h1>

components/Nav.tsx

@@ -22,7 +22,7 @@ export default function Nav() {
   }, []);
 
   return (
-    <nav className="fixed left-0 top-0 z-50 h-32 w-full">
+    <nav className="fixed top-0 left-0 z-50 h-32 w-full">
       <Wrapper>
         <div className="relative flex items-center justify-between py-5 sm:px-6 md:px-12">
           <div className="shrink-0">
@@ -40,7 +40,7 @@ export default function Nav() {
           <div ref={navRef} className="relative">
             <button
               type="button"
-              className="relative top-3 -mr-6 -mt-6 rounded-full bg-black/0 p-6 hover:bg-black/20 lg:hidden"
+              className="relative top-3 -mt-6 -mr-6 rounded-full bg-black/0 p-6 hover:bg-black/20 lg:hidden"
               onMouseDown={() => setNavOpen(!navOpen)}
             >
               <svg
@@ -55,7 +55,7 @@ export default function Nav() {
               </svg>
             </button>
             <div
-              className={`${navOpen ? 'flex' : 'hidden'} text-shadow absolute right-0 top-12 flex-col divide-white/15 rounded-lg bg-black/90 py-2 text-xs uppercase tracking-widest text-pink-100 backdrop-blur-md lg:static lg:-mr-6 lg:flex lg:flex-row lg:divide-x lg:bg-transparent lg:backdrop-blur-none`}
+              className={`${navOpen ? 'flex' : 'hidden'} text-shadow absolute top-12 right-0 flex-col divide-white/15 rounded-lg bg-black/90 py-2 text-xs tracking-widest text-pink-100 uppercase backdrop-blur-md lg:static lg:-mr-6 lg:flex lg:flex-row lg:divide-x lg:bg-transparent lg:backdrop-blur-none`}
             >
               <NavLink href="https://github.com/koodiklinikka">GitHub</NavLink>
               <NavLink href="https://koodiklinikka.slack.com">Slack</NavLink>

components/Spinner.tsx

@@ -6,7 +6,7 @@ export default function Spinner() {
       fill="none"
       viewBox="0 0 24 24"
     >
-      <circle className="opacity-35" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+      <circle className="opacity-35" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
       <path
         fill="currentColor"
         d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package.json

@@ -12,23 +12,24 @@
   },
   "dependencies": {
     "lodash.shuffle": "4.2.0",
-    "next": "15.0.3",
+    "next": "15.2.3",
-    "react": "18.3.1",
+    "react": "19.0.0",
-    "react-confetti": "6.1.0",
+    "react-confetti": "6.4.0",
-    "react-dom": "^18"
+    "react-dom": "19.0.0"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "4.0.15",
     "@types/lodash.shuffle": "4.2.9",
-    "@types/node": "22.9.0",
+    "@types/node": "22.13.12",
-    "@types/react": "18.3.12",
+    "@types/react": "19.0.12",
-    "@types/react-dom": "18.3.1",
+    "@types/react-dom": "19.0.4",
-    "eslint": "9.15.0",
+    "eslint": "9.23.0",
-    "eslint-config-next": "15.0.3",
+    "eslint-config-next": "15.2.3",
-    "postcss": "8.4.49",
+    "postcss": "8.5.3",
-    "prettier": "3.3.3",
+    "prettier": "3.5.3",
-    "prettier-plugin-tailwindcss": "0.6.8",
+    "prettier-plugin-tailwindcss": "0.6.11",
-    "tailwindcss": "3.4.15",
+    "tailwindcss": "4.0.15",
-    "typescript": "5.6.3"
+    "typescript": "5.8.2"
   },
   "prettier": {
     "printWidth": 120,

postcss.config.mjs

@@ -1,7 +1,7 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
   },
 };
 

tailwind.config.ts

@@ -1,28 +0,0 @@
-import type { Config } from 'tailwindcss';
-
-const config = {
-  darkMode: ['class'],
-  content: ['./pages/**/*.{ts,tsx}', './components/**/*.{ts,tsx}', './app/**/*.{ts,tsx}', './src/**/*.{ts,tsx}'],
-  prefix: '',
-
-  plugins: [],
-
-  theme: {
-    screens: {
-      xs: '440px', // => @media (min-width: 440px) { ... }
-      sm: '640px', // => @media (min-width: 640px) { ... }
-      md: '768px', // => @media (min-width: 768px) { ... }
-      lg: '1024px', // => @media (min-width: 1024px) { ... }
-      xl: '1280px', // => @media (min-width: 1280px) { ... }
-      '2xl': '1536px', // => @media (min-width: 1536px) { ... }
-    },
-
-    extend: {
-      fontSize: {
-        xxs: '0.625rem',
-      },
-    },
-  },
-} satisfies Config;
-
-export default config;