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

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

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

什么是顺风CSS？

什么是框架？

什么是效用优先的CSS框架？

使用顺风CSS的先决条件

如何开始使用Tailwind CSS

如何创建顺风CSS插件

什么是顺风CSS？

顺风CSS

Tailwind CSS是一个实用程序优先的CSS(级联样式表)框架，具有预定义的类，可以用来直接在标记中构建和设计网页。它允许你用HTML写CSS作为一个预定义的类。

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

什么是框架？

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

现在我们已经确定了框架的含义，它应该有助于你理解Tailwind CSS是一个基于CSS函数构建的工具。框架的所有功能都是以类的形式从CSS样式中派生出来的。

什么是效用优先的CSS框架？

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

如果您使用普通CSS(没有任何框架或库的CSS)，您将首先为您的元素指定一个类名，然后将不同的属性和值附加到该类，这又会将样式应用到您的元素。

我们将向您展示一个示例。这里，我们将创建一个圆角按钮和一个文本“点击我”。按钮看起来是这样的:

点击按钮

我们将首先使用普通CSS来完成这项工作，然后使用Tailwind CSS中可用的实用程序类。

使用普通CSS

Click me

我们将按钮类标记为btn，它将使用外部样式表进行样式化。那就是:

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

带顺风CSS

Click me

所有这些都是实现与普通CSS示例相同的效果所必需的。不存在您必须编写样式的外部样式表，因为我们使用的每个类名都已经有了预定义的样式。

使用顺风CSS的先决条件

在使用Tailwind CSS之前，您应该考虑满足一些先决条件，以便毫无困难地使用框架的功能。以下是一些例子:

良好的HTML知识、结构和工作原理

坚实的CSS基础——媒体查询、flexbox和网格系统

Tailwind CSS可以用在哪里？

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

顺风CSS的优缺点

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

更快的开发过程

由于实用程序相似，它们可以帮助您更多地练习CSS。

所有实用程序和组件都可以轻松定制。

生产文件的总体大小通常很小。

如果你已经知道CSS，学习起来很容易。

学习的好文档。

使用顺风CSS的一些缺点包括:

对于大型项目，您的标记可能看起来杂乱无章，因为所有样式都在HTML文件中。

如果对CSS了解不多，学起来也不容易。

您被迫从头开始构建一切，包括您的输入元素。当安装了Tailwind CSS后，它会删除所有默认的CSS样式。

如果你想把开发网站前端的时间减到最少，把精力放在后端逻辑上，那么Tailwind CSS并不是最好的选择。

何时使用顺风CSS

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

如果你希望使用一个易于配置的框架，你也可以使用Tailwind CSS，因为它不会强迫你总是以同样的方式使用组件(导航栏、按钮、表单等等)。);您可以选择组件的外观。但是，如果你没有学习和实践过CSS，就千万不要使用Tailwind。

Tailwind CSS和其他CSS框架的异同

以下是一些相似之处:

他们可以帮助你更快地完成工作。

它们有预定义的类。

它们基于CSS规则。

它们易于学习和使用，并具有CSS的工作知识。

现在让我们来看看其中的一些差异:

Tailwind不同于大多数框架，因为你必须创建自己的组件。比如Bootstrap有导航条、按钮等组件，但是有了Tailwind，这些都得自己搭建。

有些框架比如Bootstrap不太好定制，你得用他们的设计模式。在顺风中，你可以控制一切事物的流动。

使用Tailwind需要深入的CSS知识。编写类名是不够的，因为您必须像编写普通CSS一样组合它们才能获得相同的结果。在大多数其他框架中，当使用类名时，您只需要知道将构建什么组件。

如何开始使用Tailwind CSS

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

您已经在计算机上安装了Node.js，以便在终端中使用节点包管理器(npm)。

所有项目都已设置为您创建的文件。

这是我们当前的项目结构:

-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监控你的文件在自动构建过程中进行修改；这意味着每当我们想要构建代码并查看所需的输出时，我们都必须运行这个脚本。

使用顺风CSS

现在我们已经为我们的项目安装并设置了Tailwind CSS，让我们看一些例子来充分理解它的应用。

Flexbox示例

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

Button 1 Button 2 Button 3

三个紫色按钮

使用flex-row-reverse反转按钮的显示顺序。

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

Button 1 Button 2 Button 3

三个紫色按钮

就像前面的例子一样，flex-col-reverse是反向的。

网格示例

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

Button 1 Button 2 Button 3 Button 4 Button 5 Button 6

六个紫色按钮

颜色

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

这是一个有很多颜色的图片和它的HTML十六进制代码来说明这一点。

从顺风的默认调色板自定义颜色。(图片来源)

我们将演示如何使用上面的红色为按钮元素提供背景色:

Click meClick meClick meClick meClick meClick meClick meClick meClick meClick me

这个语法对于Tailwind中的所有颜色都是一样的，除了黑色和白色，这两种颜色的写法是一样的，但是不使用数字:bg-black和bg-white。

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

你好世界

填料

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

以下实用程序用于向元素添加填充:

p表示整个元素的填充。

填充顶部填充和底部填充。

Px左填充和右填充。

Pt的意思是填满顶部。

Pr就是填右。

Pb的意思是填满底部。

Pl表示向左填充

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

Click meClick meClick meClick meClick me

边缘

填充和边距的预定义工具非常相似。你必须用m代替p:

m

我的

不愿具体说明自己性别的人士使用的称谓

马太福音

先生

兆位

毫升

如何创建顺风CSS插件

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

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

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

const plugin = require(“tailwindcss/plugin”);

然后，我们继续在插件数组中创建插件:

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

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

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

Click me

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

总结

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

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

如果你已经了解了这一点，那么你现在已经对顺风的工作原理有了一个基本而坚实的理解。但是，为了更好地利用这个实用至上的框架，如果你没有扎实的基础，你必须继续练习，增加你的CSS知识。