如何在純 PHP 專案中使用 Tailwind CSS

（圖片來源）

要開始在純 PHP 專案中使用 Tailwind CSS，您可以在專案中安裝 Tailwind CSS。方法如下：

• 在終端機中執行 npm init -y。

• 安裝 Tailwind 依賴項： npm install tailwindcss postcss autoprefixer

• 產生 Tailwind 設定檔：npx tailwindcss init

• 建立一個 postcss.config.js 檔案並加入以下程式碼：
  

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ],
};

• 使用以下程式碼建立一個名為 src 的資料夾和一個 styles.css 檔案：

@tailwind base;
@tailwind components;
@tailwind utilities;

• 將建置腳本新增至 package.json 中：

  "scripts": {
    "build:css": "npx postcss src/styles.css -o public/styles.css"
  },

• 在終端機中執行 npm run build:css。

• 在頁面檔案中包含指向 public/styles.css 的連結（例如：index.php）：
  

<link href="./public/styles.css" rel="stylesheet">

• 確保在進行更改後執行 npm run build:css。

• 此外，請確保您的 tailwind.config.js 包含 .php 和 .html 檔案的路徑：
  

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class', // or 'media'
  content: [
    "./**/*.php",
    "./**/*.html"
  ],
  theme: {
    extend: {
...
    }
  },
  plugins: [],
}

祝大家編碼快樂！

以上是如何在純 PHP 專案中使用 Tailwind CSS的詳細內容。更多資訊請關注PHP中文網其他相關文章！