https://benzhub.github.io/tags/nextjs/Recent content in Nextjs on BenzHubHugozh-TWTue, 08 Sep 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/039-nextjs-integration/Tue, 08 Sep 2026 00:00:00 +0000https://benzhub.github.io/post/tailwindcss/039-nextjs-integration/<blockquote> <p><strong>Next.js 整合</strong> 是把 <strong>TailwindCSS</strong> 從練習專案帶進真實全端產品的關鍵一步。在 <strong>App Router</strong> 架構下,<strong>TailwindCSS v4</strong> 幾乎零設定就能運作——<code>create-next-app</code> 直接幫你裝好 v4,<code>globals.css</code> 只需一行 <code>@import &quot;tailwindcss&quot;</code>,再靠 <code>@tailwindcss/postcss</code> 接上 Next.js 的建置管線。這一篇帶你走完安裝、<code>next/font</code> 字體整合、Server 與 Client Component 下的 class 用法,並拆解 CSS 順序、Turbopack、class 未生效這三個最常見的坑,讓你在正式專案裡把 Tailwind 用得穩又順。</p> </blockquote>