如何將 Tailwind CSS 添加到靜態站點？

初始化 Tailwind

首先，需要一個最新版本的 Node。使用

$ node -v

全局安裝npx有助於遵循官方説明。這是一個運行 Node 包可執行文件的工具，如果文件缺失，它會獲取它們。獲取方法如下：

$ npm install -g npx

以下是 Tailwind CLI 的命令：

npm install -D tailwindcss

創建一個tailwind.config.js和一個main.css 文件，例如main.css文件，通常包含以下內容：

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

設置tailwind.config.js內容：

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

Building

下面執行構建 Tailwind 的方法：

npx tailwindcss -i ./main.css -o ./tailslim.css --watch

HTML 中使用

將編譯好的文件的鏈接添加到 HTML 中：

<link href="./tailslim.css" rel="stylesheet">

以上是將 Tailwind CSS 添加到靜態文件的簡單方法。