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 的 <link> 部分中添加一个 <head> 标签即可。这样一来，无需在服务器上添加额外的文件，即可访问 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，必须进行安装。您可以查看Node.js - 环境设置。

安装 Tailwind CSS 的步骤

请按照以下步骤依次安装 Tailwind CSS。

步骤 1: 使用以下命令通过 npm 安装 tailwind css。

npm install -D tailwindcss

步骤 2: 使用以下命令创建 tailwind.config.js文件。

npx tailwind css 初始化

步骤 3: 创建 CSS 文件，并将 Tailwind 各层的 @tailwind 指令添加到主 CSS 文件中。

@tailwind base;
@tailwind components;
@tailwind utility;

步骤 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 时，颜色类别会有所不同，但这些变化可以正确渲染。