Tailwind CSS 主頁
  1. 安裝
  2. 使用 Next.js 安裝 Tailwind CSS

  1. 建立你的專案

    如果你還沒有設定新的 Next.js 專案，請先建立一個。最常見的做法是使用 建立 Next 應用程式。

    終端機
    npx create-next-app@latest my-project --typescript --eslintcd my-project

  2. 安裝 Tailwind CSS

    透過 npm 安裝 tailwindcss 及其對等相依性，然後執行 init 指令，以產生 tailwind.config.js 和 postcss.config.js。

    終端機
    npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p

  3. 設定你的範本路徑

    在你的 tailwind.config.js 檔案中，新增所有範本檔案的路徑。

    tailwind.config.js
    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
 
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

  4. 將 Tailwind 指令新增到您的 CSS

    將 Tailwind 各個層級的 @tailwind 指令新增到您的 globals.css 檔案。

    globals.css
    @tailwind base;
@tailwind components;
@tailwind utilities;

  5. 開始您的建置程序

    使用 npm run dev 執行您的建置程序。

    終端機
    npm run dev

  6. 開始在您的專案中使用 Tailwind

    開始使用 Tailwind 的公用程式類別來設定您的內容樣式。

    index.tsx
    export default function Home() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}