Tailwind CSS - 安装

原创

admin 4个月前 (08-07) 阅读数 23 #CSS

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 - 安装</title>
    <!-- Tailwind CSS CDN 链接 -->
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>

<body>
    <p class="text-3xl font-bold">
        通过 CDN 链接使用 Tailwind CSS
    </p>
    <p class="m-2">
        在此代码中，我们通过 HTML 链接标签使用了 CDN 链接
    </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 - 安装</title>
    <!-- Tailwind CSS CDN 链接 -->
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
    <p class="text-3xl font-bold">
        通过 CDN 链接使用 Tailwind CSS
    </p>
    <p class="m-2">
        在此代码中，我们通过 HTML script 标签使用了 CDN 链接
    </p>
</body>

</html>

使用 CLI 工具安装 Tailwind CSS

要安装 Tailwind CSS，需要满足一些先决条件，如下所述。

安装 Tailwind CSS 的先决条件

Node.js 安装： 要通过 npm 安装 Tailwind CSS，必须安装 Node.js。您可以查看 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 指令添加到您的主 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>