📦 Tailwind v4に

app/font.ts

@@ -2,6 +2,5 @@ import { Kiwi_Maru } from "next/font/google";
 
 export const kiwiMaru = Kiwi_Maru({
   weight: ["400"],
-  subsets: ["latin"],
-  variable: "--font-kiwimaru"
+  subsets: ["latin"]
 });

app/page.tsx

@@ -46,7 +46,7 @@ export default async function Page(props: Props) {
   const poems = id ? getPoem(id) : await searchPoems(query);
 
   return (
-    <main className={kiwiMaru.variable}>
+    <main className={kiwiMaru.className}>
       <Header />
       <UI poems={poems} query={query} />
       <Footer />

components/common/footer/index.tsx

@@ -5,7 +5,7 @@ import { updatedAtUTC } from "data/poems";
 import Links from "./links";
 
 const Footer = () => (
-  <footer className="w-full">
+  <footer className="w-full font-sans">
     <Wave
       className="relative top-0.5 h-24 align-bottom"
       fill="#4C7ABE"
@@ -16,7 +16,7 @@ const Footer = () => (
         speed: 0.155
       }}
     />
-    <div className="flex flex-col items-center justify-center bg-main px-8 pb-20 pt-0.5 text-center text-sm tracking-wider text-white">
+    <div className="bg-main flex flex-col items-center justify-center px-8 pt-0.5 pb-20 text-center text-sm tracking-wider text-white">
       <Links />
       <span className="mb-8 w-8 border-b-2 border-dashed border-white" />
       <span className="mb-2" data-testid="last-updated">

components/ui/form/index.tsx

@@ -54,7 +54,7 @@ const Form = ({ query, idolOptions, clotheOptions }: FormProps) => {
   }, [searchParams]);
 
   return (
-    <div className="mb-16 flex justify-center">
+    <div className="mb-16 flex justify-center font-sans">
       {/* 画面幅が lg 以下なら縦並びにする */}
       <div className="w-full max-w-lg lg:w-auto lg:max-w-none">
         <Label />

components/ui/form/input.tsx

@@ -4,13 +4,13 @@ import { FiSearch } from "react-icons/fi";
 const Input = (props: ComponentPropsWithRef<"input">): JSX.Element => {
   return (
     <form
-      className="relative inline-flex w-full items-center text-main lg:w-72"
+      className="text-main relative inline-flex w-full items-center lg:w-72"
       id="search"
       role="search"
     >
       <input name="type" type="hidden" value="poem" />
       <input
-        className="m-2 h-10 w-full rounded-md border-2 border-main p-2 pr-8 placeholder-sub focus:outline-none"
+        className="border-main placeholder-sub m-2 h-10 w-full rounded-md border-2 p-2 pr-8 focus:outline-hidden"
         type="text"
         data-testid="poem-textbox"
         {...props}

components/ui/index.tsx

@@ -23,7 +23,7 @@ const UI = ({ poems, query }: Props): JSX.Element => {
   ];
 
   return (
-    <div className="mx-6 flex-grow md:mx-12">
+    <div className="mx-6 grow md:mx-12">
       <Form
         query={query}
         idolOptions={idolOptions}

package.json

@@ -28,6 +28,7 @@
   "devDependencies": {
     "@eslint/compat": "^1.2.2",
     "@playwright/test": "^1.42.1",
+    "@tailwindcss/postcss": "^4.0.0",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
@@ -36,7 +37,6 @@
     "@types/node": "^22.0.0",
     "@types/react": "19.0.8",
     "@types/react-dom": "19.0.3",
-    "autoprefixer": "^10.4.18",
     "axios": "^1.6.7",
     "eslint": "^9.0.0",
     "eslint-config-next": "15.1.6",
@@ -45,8 +45,8 @@
     "jest-environment-jsdom": "^29.7.0",
     "postcss": "^8.4.35",
     "prettier": "^3.2.5",
-    "prettier-plugin-tailwindcss": "^0.6.0",
-    "tailwindcss": "^3.4.1",
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "tailwindcss": "^4.0.0",
     "ts-node": "^10.9.2",
     "typescript": "^5.3.3"
   }