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 时，颜色类的差异会得到正确的呈现。

打印页面