如何使用Tailwind CSS快速开发新潮时髦网站

随着您作为开发人员的进步，您更有可能使用通过编写更少代码来帮助您完成更多工作的技术。像Tailwind CSS这样可靠的前端框架是实现这一目标的一种方法。

在本文中，我们将了解Tailwind CSS——一个有助于构建和设计网页的CSS框架。我们将首先解释如何在您的项目中安装和集成Tailwind CSS，查看一些实际应用程序，以及如何创建自定义样式和插件。

1. 什么是Tailwind CSS？
2. 什么是框架？
3. 什么是实用程序优先的CSS框架？
4. 使用Tailwind CSS的先决条件
5. 如何开始使用Tailwind CSS
6. 如何创建Tailwind CSS插件

什么是Tailwind CSS？

Tailwind CSS

Tailwind CSS是一个实用程序优先的CSS（级联样式表）框架，带有预定义的类，您可以使用这些类直接在标记中构建和设计网页。它允许您以预定义类的形式在HTML中编写CSS。

我们将定义什么是框架以及“实用程序优先CSS”的含义，以帮助您更好地理解Tailwind CSS的全部含义。

什么是框架？

作为一个通用的编程术语，框架是一种工具，它提供了从现有工具的特性构建的可重用和现成的组件。创建框架的总体目的是通过减少工作来提高开发速度。

现在我们已经确定了框架的含义，它应该可以帮助您理解Tailwind CSS是基于CSS功能构建的工具。该框架的所有功能都源自以类形式组成的CSS样式。

什么是实用程序优先的CSS框架？

当我们说实用程序优先CSS时，我们指的是我们的标记 (HTML)中具有预定义功能的类。这意味着您只需编写一个附加了预定义样式的类，这些样式将应用于元素。

在您使用vanilla CSS（没有任何框架或库的CSS）的情况下，您将首先为您的元素指定一个类名，然后将不同的属性和值附加到该类，这反过来会将样式应用于您的元素.

我们将向您展示一个示例。在这里，我们将创建一个带有圆角的按钮和一个显示“Click me”的文本。这是按钮的样子：

点击按钮

我们将首先使用vanilla CSS执行此操作，然后使用Tailwind CSS中可用的实用程序类。

With Vanilla CSS

<button class="btn">Click me</button>

我们已经给按钮标签class btn，它将使用外部样式表进行样式设置。那是：

.btn {
background-color: #000;
color: #fff;
padding: 8px;
border: none;
border-radius: 4px;
}

With Tailwind CSS

<button class="bg-black p-2 rounded">Click me</button>

这都是实现与vanilla CSS示例相同的效果所必需的。没有创建您必须编写样式的外部样式表，因为我们使用的每个类名都已经具有预定义的样式。

使用Tailwind CSS的先决条件

在使用Tailwind CSS之前，您应该考虑满足一些先决条件，才能毫无困难地使用框架的功能。这里有几个：

• 良好的HTML知识、结构和工作原理
• 扎实的CSS基础——媒体查询、flexbox和网格系统

Tailwind CSS可以在哪里使用？

您可以在前端Web项目中使用Tailwind CSS，包括React.js、Next.js、Laravel、Vite、Gatsby等JavaScript框架。

Tailwind CSS的优缺点

以下是使用Tailwind CSS的一些优势：

1. 更快的开发过程
2. 由于实用程序相似，可帮助您更多地练习CSS
3. 所有实用程序和组件都可以轻松定制
4. 生产的整体文件大小通常很小
5. 如果您已经了解CSS，则易于学习
6. 学习的好文档

使用Tailwind CSS的一些缺点包括：

1. 对于大型项目，您的标记可能看起来杂乱无章，因为所有样式都在HTML文件中。
2. 如果你对CSS不太了解，学习起来并不容易。
3. 您被迫从头开始构建所有内容，包括您的输入元素。安装Tailwind CSS时，它会删除所有默认CSS样式。
4. 如果您希望最大限度地减少开发网站前端所花费的时间并且主要关注后端逻辑，那么Tailwind CSS不是最佳选择。

何时使用Tailwind CSS

Tailwind CSS最适合通过编写更少的代码来加快开发过程。它带有一个设计系统，有助于保持各种设计要求（如填充、间距等）的一致性；有了这个，您不必担心创建您的设计系统。

如果您希望使用易于配置的框架，您也可以使用Tailwind CSS，因为它不会强制您始终以相同的方式使用组件（导航栏、按钮、表单等）；您可以选择组件的外观。但是，如果您没有学习和实践过CSS，则永远不应该使用Tailwind。

Tailwind CSS与其他CSS框架的异同

以下是一些相似之处：

1. 它们可以帮助您更快地完成工作。
2. 它们带有预定义的类。
3. 它们是建立在CSS规则之上的。
4. 它们都易于学习和使用，具有CSS的工作知识。

现在让我们看看其中的一些区别：

1. Tailwind与大多数框架不同，因为您必须创建自己的组件。例如，Bootstrap具有导航栏、按钮等组件，但使用Tailwind，您必须自己构建所有这些。
2. 像Bootstrap这样的一些框架不容易定制，所以你不得不使用它们的设计模式。在Tailwind中，您可以控制一切的流程。
3. 使用Tailwind需要深入的CSS知识。编写类名是不够的，因为您必须将它们组合起来，就好像您正在编写vanilla CSS一样才能获得相同的结果。在大多数其他框架中，您只需要知道使用类名时将构建什么组件。

如何开始使用Tailwind CSS

在安装Tailwind CSS并将其集成到您的项目中之前，请确保：

1. 您已在计算机上安装了Node.js，以使用终端中的Node包管理器 (npm)。
2. 您的项目已全部设置为您创建的文件。

这是我们目前的项目结构：

-Tailwind-tutorial
-public
-index.html
-styles.css
-src
-styles.css

接下来，为您的项目启动一个终端并运行以下命令：

    npm install -D tailwindcss

上述命令将安装Tailwind CSS框架作为依赖项。接下来，通过运行以下命令生成tailwind.config.js文件：

    npm install -D tailwindcss

tailwind.config.js文件在创建时将为空，因此我们必须添加一些代码行：

module.exports = {
content: ["./src/**/*.{html,js}", "./public/*.html"],
theme: {
extend: {},
},
plugins: [],
};

内容数组中提供的文件路径将使Tailwind能够在构建期间清除/删除任何未使用的样式。

接下来要做的是将“@tailwind”指令添加到src文件夹中的CSS文件中 – 这是Tailwind为您生成所有预定义实用程序样式的地方：

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

最后要做的是通过在终端中运行以下命令来启动构建过程：

    npx tailwindcss -i ./src/styles.css -o ./public/styles.css --watch

在上面的代码中，我们告诉Tailwind我们的输入文件是src文件夹中的样式表，并且我们使用的任何样式都必须构建到public文件夹中的输出文件中。--watch允许Tailwind监视您的文件以进行自动构建过程的更改；省略它意味着我们每次想要构建代码并查看所需的输出时都必须运行该脚本。

使用Tailwind CSS

现在我们已经为我们的项目安装并设置了Tailwind CSS，让我们看一些示例来全面了解它的应用程序。

Flexbox示例

要在Tailwind CSS中使用flex，您需要添加一个flex类，然后添加flex项的方向：

    <div class="flex flex-row">
<button> Button 1 </button>
<button> Button 2 </button>
<button> Button 3 </button>
</div>

三个紫色按钮

使用flex-row-reverse将反转按钮出现的顺序。

flex-col将它们堆叠在一起。这是一个例子：

<div class="flex flex-col">
<button> Button 1 </button>
<button> Button 2 </button>
<button> Button 3 </button>
</div>

三个紫色按钮

就像前面的例子一样，flex-col-reverse颠倒顺序。

Grid示例

在网格系统中指定列和行时，我们采用不同的方法，通过传入一个数字来确定元素如何占用可用空间：

<div class="grid grid-cols-3">
<button> Button 1 </button>
<button> Button 2 </button>
<button> Button 3 </button>
<button> Button 4 </button>
<button> Button 5 </button>
<button> Button 6 </button>
</div>

六个紫色按钮

颜色

Tailwind带有许多预定义的颜色。每种颜色都有一组不同的变化，最浅的变化是50，最暗的变化是900。

这是一张包含多种颜色的图片及其HTML十六进制代码来说明这一点