tailwind v4

Author: ken-matsui

app/globals.css

@@ -1,6 +1,7 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@plugin "./hero.ts";
+@source "../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}";
+@custom-variant dark (&:is(.dark *));
 
 html {
     font-size: 16px;

app/hero.ts

@@ -0,0 +1,2 @@
+import { heroui } from "@heroui/react";
+export default heroui();

app/page.tsx

@@ -12,14 +12,14 @@ export const metadata: Metadata = {
 
 export default function Home() {
     return (
-        <main className="container mx-auto max-w-7xl px-6 flex-grow">
+        <main className="container mx-auto max-w-7xl px-6 grow">
             <section className="flex flex-col items-center justify-center">
-                <section className="flex relative overflow-hidden lg:overflow-visible w-full flex-nowrap justify-between items-center h-[calc(100vh_-_64px)] 2xl:h-[calc(84vh_-_64px)]">
+                <section className="flex relative overflow-hidden lg:overflow-visible w-full flex-nowrap justify-between items-center h-[calc(100vh-64px)] 2xl:h-[calc(84vh-64px)]">
                     <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                         <div className="text-center leading-8 md:leading-10 md:text-left">
                             <div className="inline-block">
                                 <h1 className="font-bold text-3xl lg:text-6xl">
-                                    <span className="from-[#51DEEC] to-[#3023AE] bg-clip-text text-transparent bg-gradient-to-b">
+                                    <span className="from-[#51DEEC] to-[#3023AE] bg-clip-text text-transparent bg-linear-to-b">
                                         Effortlessly
                                     </span>{" "}
                                     build and share your C++ packages.

package.json

@@ -22,14 +22,15 @@
         "@fortawesome/free-solid-svg-icons": "^6.7.2",
         "@fortawesome/react-fontawesome": "^0.2.2",
         "@heroui/react": "2.8.1",
+        "@heroui/theme": "^2.4.19",
         "@vercel/analytics": "^1.5.0",
         "@vercel/speed-insights": "^1.2.0",
-        "framer-motion": "^12.22.0",
+        "framer-motion": "12.23.6",
         "graphql": "^16.11.0",
         "next": "^15.3.4",
         "next-themes": "^0.4.6",
-        "react": "^18.3.1",
-        "react-dom": "^18.3.1",
+        "react": "19.1.0",
+        "react-dom": "19.1.0",
         "react-markdown": "^10.1.0",
         "semver": "^7.7.2",
         "timeago.js": "^4.0.2"
@@ -40,18 +41,18 @@
         "@graphql-codegen/introspection": "^4.0.3",
         "@graphql-codegen/typescript-graphql-request": "^6.3.0",
         "@graphql-codegen/typescript-operations": "^4.6.1",
+        "@tailwindcss/postcss": "^4.1.11",
         "@tailwindcss/typography": "^0.5.16",
         "@tsconfig/next": "^2.0.3",
         "@types/node": "24.0.10",
         "@types/react": "18.3.12",
         "@types/react-dom": "18.3.1",
-        "autoprefixer": "^10.4.21",
         "graphql-request": "^7.2.0",
         "graphql-tag": "^2.0.0",
         "next-sitemap": "^4.2.3",
         "postcss": "^8.5.6",
         "tailwind-variants": "^1.0.0",
-        "tailwindcss": "^3.4.17",
+        "tailwindcss": "4.1.11",
         "typescript": "^5.8.3"
     },
     "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"

postcss.config.mjs

@@ -1,6 +1,5 @@
 export default {
     plugins: {
-        tailwindcss: {},
-        autoprefixer: {},
+        "@tailwindcss/postcss": {},
     },
 };