Tailwind CSS - 安裝

安裝 Tailwind CSS 是一項非常簡單的任務，但在安裝之前，您應該知道，如果您的目的是學習 Tailwind CSS，那麼您可以使用 CDN 連結。如果您正在從事一個專案，並且想要建立自己的類或配置預定義的類，那麼我們建議您安裝 Tailwind CSS。

Tailwind CSS 快速、簡單且靈活。它包含一個類列表，它會從 HTML 檔案、Javascript 元件和其他模板中掃描這些類，並根據這些類生成相應的樣式到文件中。Tailwind CSS 消除了編寫自定義 CSS 程式碼的需要。

如何使用 tailwind css？

CDN 連結： 透過在我們的 HTML 文件中插入 CDN 連結，我們可以有效地使用 Tailwind 的實用程式類。
安裝 Tailwind CSS： 透過 npm 安裝 Tailwind CSS，我們可以有效地使用 Tailwind CSS 的實用程式類。

透過 CDN 連結使用 Tailwind CSS

我們可以透過兩種方式在 HTML 文件中新增 CDN 連結來應用 Tailwind CSS

使用 <link> 標籤

我們只需要在 HTML 的 <head> 部分包含一個 <link> 標籤即可。這無需在您的伺服器上新增額外檔案即可訪問 Tailwind 的實用程式類。

<link href= 
"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" 
      rel="stylesheet">

示例

在此示例中，我們透過 <link> 標籤使用了 CDN 連結。

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Tailwind CSS - Installation</title>
    <!-- Tailwind CSS CDN Link -->
    <link href= 
"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" 
          rel="stylesheet">
</head>

<body>
    <p class="text-3xl font-bold">
        Tailwind CSS through CDN Link
    </p>
    <p class="m-2">
        In this code we have used CDN link 
        through HTML link Tag
    </p>
</body>

</html>

使用 <script> 標籤

我們只需要在 HTML 的 <head> 部分包含一個 <script> 標籤即可。這無需在您的伺服器上新增額外檔案即可訪問 Tailwind 的實用程式類。

<script src="https://cdn.tailwindcss.com"></script>

示例

在此示例中，我們透過 <script> 標籤使用了 CDN 連結。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Tailwind CSS - Installation</title>
    <!-- Tailwind CSS CDN Link -->
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
    <p class="text-3xl font-bold">
        Tailwind CSS through CDN Link
    </p>
    <p class="m-2">
        In this code we have used CDN link 
        through HTML script Tag
    </p>
</body>

</html>

使用 CLI 工具安裝 Tailwind CSS

要安裝 Tailwind CSS，需要滿足某些先決條件，我們將在下面提到。

安裝 Tailwind CSS 的先決條件

Nodejs 安裝： 要透過 npm nodejs 安裝 Tailwind CSS，需要安裝 nodejs。您可以檢視此 Node.js - 環境設定。

安裝 Tailwind CSS 的步驟

按照下面提到的順序執行以下步驟以安裝 Tailwind CSS。

步驟 1： 使用如下所示的命令透過 npm 安裝 tailwind css。

npm install -D tailwindcss

步驟 2： 使用下面提到的命令，您可以建立您的 tailwind.config.js 檔案。

npx tailwind css init

步驟 3： 建立您的 CSS 檔案，併為 Tailwind 的每一層新增 @tailwind 指令到您的主 CSS 檔案中。

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

步驟 4： 現在，使用下面提到的命令建立另一個 output.css 檔案，並執行 CLI 工具掃描您的模板檔案以查詢類並構建您的 CSS。

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

步驟 5： 將編譯後的 CSS 檔案新增到 <head> 中，並開始使用 Tailwind 的實用程式類來設定內容的樣式。

<!doctype html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="./output.css" rel="stylesheet">
</head>
<body>
    <h1 class="text-3xl font-bold underline">
    Hello world!
    </h1>
</body>
</html>

結論

我們學習瞭如何安裝 Tailwind CSS，但我們強烈建議您透過 <script> 標籤使用 CDN 連結。當我們透過 <script> 標籤使用 CDN 時，顏色類的差異會得到正確的呈現。

列印頁面