Tailwind CSS 教程

Tailwind CSS 是一个实用性优先的 CSS 框架，使用其实用性优先的预定义类来设计网站。它是一个低级 CSS 框架，易于学习和维护。Tailwind CSS 具有许多内置功能和类，可直接用于 HTML 文档。

为什么选择 Tailwind CSS?

Tailwind CSS 是一个 CSS 框架，它为在这个快节奏的开发阶段创建响应迅速且 SEO 友好的网站提供了许多优势。它提供了几个优点，包括..

• 实用至上范式:您可以使用预定义的类来装饰 HTML 元素，而不必编写自定义 CSS。
• 响应式设计:Tailwind CSS 实用类可以根据屏幕大小和断点使用，因此您的网站可以响应。
• 一致性和可维护性:其统一的设计可确保您的所有页面都遵循一致的前端设计，并且易于维护。
• 快速开发:与使用自定义 CSS 相比，使用预定义类将始终提高您的开发速度。
• 设计灵活性:它拥有最大的预定义类，有机会创建您的设计，使您的设计技能更加灵活。

如何使用 Tailwind CSS?

在项目中使用 Tailwind CSS 有两种方法，您可以通过 CDN 链接使用它，也可以将其安装在您的服务器/本地机器上。

Tailwind CSS 安装

• 使用 yarn 安装 Tailwind CSS
• 使用 npm 安装 Tailwind CSS

您可以查看本文中的 Tailwind CSS 安装指南 - Tailwind CSS 安装

Tailwind CSS CDN 链接

只需在 HTML 文件的 <script> 部分添加 <head> 标签即可。这样，您无需在服务器上添加任何额外文件，即可访问 Tailwind 的实用程序类。

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

只需在 HTML 文件的 <head> 部分添加 <link> 标签即可。这样，您无需在服务器上添加任何额外文件，即可访问 Tailwind 的实用程序类。

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

Tailwind CSS 示例

这是一个简单的 Tailwind CSS 示例，描述了如何在鼠标悬停时更改背景颜色。

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
 content="width=device-width, initial-scale=1.0">
  <!-- Tailwind CSS CDN Link -->
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Tailwind CSS - Tutorial</title>
</head>

<body class="bg-gray-100">
  <div class="container mx-auto p-4">
    <h3 class="text-3xl font-bold">
      <span class="text-cyan-400">
        Tailwind CSS
      </span>
        Tutorial by
      <span class="text-green-600">Tutorials</span>point
    </h3>
    <p class="mt-4 text-gray-700">
        This is a simple example of Tailwind CSS
        on HTML elements, that is how we can use
        Tailwind CSS classes.
    </p>
    <button class="mt-4 px-4 py-2 bg-green-600
 text-white rounded
 hover:bg-green-900">
 Click Me
    </button>
  </div>
</body>

</html>

学习 Tailwind CSS 的先决条件

在开始学习 Tailwind CSS 教程之前，您需要具备 HTML 知识和 CSS 基础知识。您可以通过我们免费的 HTML 和 CSS 教程学习 HTML 和 CSS。

Tailwind CSS 入门

既然您已经了解了 Tailwind CSS，本指南将涵盖安装、设置和核心概念，帮助您开始使用实用优先的 CSS 构建响应式网站。

Tailwind CSS 常见问题解答

Tailwind CSS 有一些常见问题解答，本节将尝试简要解答。

问题 1:请解释一下 Tailwind CSS 中的"实用优先"概念?

"实用优先"是指该框架专注于提供可直接在 HTML 文档中使用的实用类。

问题 2:Tailwind CSS 是开源的(免费使用)吗?

Tailwind CSS 是一个开源项目，可免费使用。

问题 3:如何将 Tailwind CSS 集成到 HTML 文件中?

我们可以通过 CDN 链接以及从 npm 或 yarn 安装，轻松地将 Tailwind CSS 集成到项目中。

问题 4: Tailwind CSS 的最新版本是什么?

那么，Tailwind CSS 的当前版本是 3.4.4

问题 5:为什么 Tailwind CSS 比 Bootstrap 更好?

Tailwind CSS 和 Bootstrap 都是流行的 CSS 框架，但 Tailwind CSS 提供了用于高度可定制设计的实用类，而 Bootstrap 提供了现成的组件，但定制性较差。

问题 6:如何下载 Tailwind CSS Typography?

我们可以使用提供的命令下载 Tailwind CSS Typography，以便轻松地将预先设置好的字体样式集成到您的项目中。

npm install @tailwindss/typography

问题 7:如何在 Tailwind CSS 中将文本加粗?

为了实现加粗文本，我们可以轻松添加实用程序类 font-bold。

问题 8:如何水平和垂直居中?

我们可以轻松添加实用程序类 self-center。

问题 9:如何安装 Tailwind CSS 自定义表单?

使用给定的命令轻松安装 Tailwind CSS 自定义表单，增强项目中的表单样式和自定义功能。

npm install @tailwindcss/custom-forms - - save-dev