fix : Tailwind 적용 오류 및 토큰 재설정

Author: KongMezu

package.json

@@ -21,8 +21,10 @@
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "autoprefixer": "^10.4.21",
     "eslint": "^9",
     "eslint-config-next": "15.5.4",
+    "postcss": "^8.5.6",
     "tailwindcss": "4.1.14",
     "typescript": "^5"
   }

pnpm-lock.yaml

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

postcss.config.js

@@ -1,5 +1,5 @@
-import "@/styles/globals.css";
-import type { AppProps } from "next/app";
+import '../styles/globals.css';
+import type { AppProps } from 'next/app';
 
 export default function App({ Component, pageProps }: AppProps) {
   return <Component {...pageProps} />;

src/pages/_app.tsx

@@ -1,16 +1,8 @@
-export default function Home() {
+export default function HomePage() {
   return (
-    <>
-      <div className='flex flex-col items-center justify-center min-h-screen py-2 bg-gray-50'>
-        <main className='flex flex-col items-center justify-center w-full flex-1 px-4 sm:px-20 text-center'>
-          <h1 className='text-4xl sm:text-6xl font-extrabold text-gray-900 mb-4'>
-            초기 세팅 완료
-          </h1>
-          <p className='mt-3 text-lg sm:text-2xl text-gray-600'>
-            Next.js(Page Router) + TS + Tailwind + Axios
-          </p>
-        </main>
-      </div>
-    </>
+    <div className='bg-mint-500 text-background p-8 '>
+      <h1 className='p-20 text-headline-lg-serif'>테스트</h1>
+      <p className='text-pink-400 text-display-lg'>되거라</p>
+    </div>
   );
 }