Tailwind CSS 首頁
  1. 安裝
  2. 使用 Create React App 安裝 Tailwind CSS

Create React App 不支援自訂 PostCSS 配置，並且與 PostCSS 生態系統中的許多重要工具不相容，例如 `postcss-import`。

我們強烈建議使用 Vite、 Parcel、 Next.js 或 Remix ，而不是 Create React App。它們提供同等或更好的開發人員體驗，但具有更大的靈活性，讓您可以更靈活地控制 Tailwind 和 PostCSS 的設定方式。

  1. 建立您的專案

    如果您尚未設定，請先使用 Create React App v5.0+ 建立新的 React 專案。

    終端機
    npx create-react-app my-projectcd my-project

  2. 安裝 Tailwind CSS

    透過 npm 安裝tailwindcss，然後執行 init 指令，以產生您的 tailwind.config.js 檔案。

    終端機
    npm install -D tailwindcssnpx tailwindcss init

  3. 設定範本路徑

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

    tailwind.config.js
    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

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

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

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

  5. 開始您的建置流程

    使用 npm run start 執行您的建置流程。

    終端機
    npm run start

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

    開始使用 Tailwind 的實用程式類別，為您的內容設定樣式。

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