随着您作为开发人员的进步，您更有可能使用通过编写更少代码来帮助您完成更多工作的技术。像Tailwind CSS这样可靠的前端框架是实现这一目标的一种方法。 在本文中，我们将了解Tailwind CSS——一个有助于构建和设计网页的CSS框架。我们将首先解释如何在您的项目中安装和集成Tailwind CSS，查看一些实际应用程序，以及如何创建自定义样式和插件。 什么是Tailwind CSS？ 什么是框架？ 什么是实用程序优先的CSS框架？ 使用Tailwind CSS的先决条件 如何开始使用Tailwind CSS 如何创建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: […]
