如何使用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十六进制代码来说明这一点

从Tailwind的默认调色板自定义颜色。（图片来源）

我们将举例说明如何使用上面的红色为按钮元素提供背景颜色：

<button class="bg-red-50">Click me</button>
<button class="bg-red-100">Click me</button>
<button class="bg-red-200">Click me</button>
<button class="bg-red-300">Click me</button>
<button class="bg-red-400">Click me</button>
<button class="bg-red-500">Click me</button>
<button class="bg-red-600">Click me</button>
<button class="bg-red-700">Click me</button>
<button class="bg-red-800">Click me</button>
<button class="bg-red-900">Click me</button>

此语法对于Tailwind中的所有颜色都是相同的，除了黑色和白色，它们的书写方式相同，但不使用数字：bg-black和bg-white.

要添加文本颜色，请使用类text-{color}：

<p class="text-yellow-600">Hello World</p>

Padding

Tailwind已经有一个设计系统，可以帮助您在设计中保持一致的规模。您只需要知道应用每个实用程序的语法。

以下是用于向元素添加填充的实用程序：

• p表示整个元素的填充。
• py表示 padding padding-top和padding-bottom。
• px表示 padding-left和padding-right。
• pt表示填充顶部。
• pr表示填充权。
• pb表示填充底部。
• pl表示向左填充

要将它们应用于您的元素，您必须使用Tailwind提供的适当数字——有点类似于上一节中表示颜色变体的数字。这就是我们的意思：

<button class="p-0">Click me</button>
<button class="pt-1">Click me</button>
<button class="pr-2">Click me</button>
<button class="pb-3">Click me</button>
<button class="pl-4">Click me</button>

Margin

用于填充和边距的预定义实用程序非常相似。您必须将 替换p为m：

• m
• my
• mx
• mt
• mr
• mb
• ml

如何创建Tailwind CSS插件

尽管Tailwind CSS已经为您构建了大量实用程序和设计系统，但您仍然可能拥有想要添加的特定功能来扩展Tailwind的用途。Tailwind CSS允许我们通过创建插件来做到这一点。

让我们通过创建一个添加浅绿色的插件和一个将元素在 X 轴上旋转 150º 的旋转实用程序来弄脏我们的手。我们将使用一点JavaScript在tailwind.config.js文件中创建这些实用程序。

现在，让我们分解一下。我们做的第一件事是导入Tailwind的插件函数：

const plugin = require("tailwindcss/plugin");

然后我们继续在plugins数组中创建我们的插件：

  plugins: [
plugin(function ({ addUtilities }) {
const newUtilities = {
".bg-aqua": { background: "aqua" },
".rotate-150deg": {
transform: "rotateX(150deg)",
},
};
addUtilities(newUtilities);
}),
],

制作插件后，您可能必须重新运行构建脚本。

现在插件已经准备好了，我们可以测试它们：

<button class="bg-aqua rotate-150deg">Click me</button>

如果你做的一切都正确，你应该有一个浅绿色的按钮，文本在X轴上旋转到150º。

小结

在加快您的工作流程时，框架是一个非常宝贵的选择。它们可以帮助您构建美观且专业的网页，同时保持设计的一致性。Tailwind CSS提供了许多实用的CSS类来帮助您将网页设计和开发提升到一个新的水平。

这篇文章告诉我们什么是Tailwind CSS以及是什么使它成为一个框架。然后，我们查看了安装过程并查看了一些示例，这些示例展示了我们如何创建自定义插件来扩展现有功能。

如果您已经跟进了这一点，那么您现在对Tailwind的工作原理有了基本但扎实的了解。但是，为了更好地使用这种实用程序优先的框架，如果您还没有扎实的基础，则必须继续练习并增加对CSS的了解。