介绍

您是CSS开发人员，希望释放您的网页设计创造力吗？别再看。在本文中，我们将为您提供实现这一目标的基本知识。我们将向您介绍Tailwind CSS，这是一个尖端的CSS框架，我们认为代表了Web开发的未来。我们将解释为什么您应该考虑采用它，指导您完成PC上的安装过程，向您展示如何利用它来设计Web应用程序，甚至引导您完成一个教程项目以应用您所学的内容。

先决条件
为了充分利用本文，您应该使用自定义CSS和对HTML的基本了解在Web开发方面具有经验。准备好进行一些练习。此外，请确保您拥有具有稳定Internet连接的可靠PC。

让我们前进：

What is Tailwind CSS?
Why Choose Tailwind CSS?
Companies using Tailwind CSS
Tailwind Component Libraries
Common Misconceptions
Installation
Tutorial Project
Conclusion
References

什么是CSS？

tailwind CSS是一个实用优先的框架，可以简化现代网站开发，同时将所有内容都保留在HTML中。它通过将小型单用途实用程序类直接应用于HTML元素来简化响应式接口的创建。使用Tailwind CSS，您可以有效地设计Web布局和组件，操纵颜色，边距和填充。告别每个元素的自定义CSS； Tailwind CSS使您有能力将实用程序类组合成所需的设计和功能。

尾风CSS的历史和影响
由亚当·沃森（Adam Wathan）开发，并于2017年在Github上发行，tailwind CSS引起了全球开发商和公司的关注。它彻底改变了样式游戏，使网络开发更快，更高效。

不要错过这个机会来探索CSS开发的未来。让我们潜入并使用尾风CSS来解锁您的网页设计创造力！

为什么选择尾风CSS？

作为CSS开发人员从自定义CSS过渡，您可能会想知道为什么应该选择与其他CSS框架相比，您的开发人员同行经常讨论的CSS框架。我可以为切换到Tailwind CSS提供几个令人信服的理由，我将在下面概述：

选择尾风CSS的主要动机之一是它可以使用“ @apply”指令从头开始创建自定义组件的能力。此外，它允许在“ tailwind.config.js”文件中无缝自定义主题。这将其与其他框架区分开来，这些框架通常提供具有有限自定义选项的预制组件。您必须注意，您仍然可以根据需要合并自定义CSS和HTML。
在此框架内，无需强调精确的CSS类名称。使用Tailwind CSS，开发人员可以绕过命名CSS类的麻烦，而是直接在其HTML中使用实用程序类，从而消除了明确定义类名称的需求。

示例代码：
<div class=” p-4 bg-blue-500 text-white rounded cursor-pointer”>Button</div>
这种方法显着简化了开发人员的工作流程，因为他们花了更少的时间思考命名惯例，并且可以更多地专注于编写有效的代码。
在尾风CSS中，无需应用BEM（块，元素，修饰符）方法。 BEM通常用作制定清洁和可理解的CSS代码的命名约定，尤其是在广泛的网络开发项目中，CSS可能会变得复杂。与自定义CSS不同，Tailwind CSS不需要BEM方法。取而代之的是，您可以直接使用公用事业领先的课程，而无需担心命名惯例。
例如，考虑采用BEM方法的以下CSS代码：
 <div class=”button button—primary”>Click me</div>

/* CSS */
.button {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
}

.button--primary {
  background-color: #007bff;
  color: white;
}

相比之下，与上述CSS代码相当的尾风CSS相当于：
<div class”bg-blue-500 text-white py-2 px-4 rounded cursor-pointer”>Click me</div>
如您所见，BEM方法涉及定义按钮类名称及其修饰符，从而产生更多的代码行。在Tailwind CSS中，所有内容都是通过将实用程序类应用于HTML元素来完成的。

Tailwind CSS在创建高效且优化的Web应用程序方面表现出色。该框架采用了一种实用优先的方法，使开发人员可以轻松制作清洁和可维护的代码。
tailwind CSS融合了JIT（及时）编译器，并使用了特殊的语法。这些功能可以促进样式定制，增强浏览器性能，确保开发的一致性，并使开发人员更快地工作。当您更深入地研究尾风时，您将对JIT编译器有更深入的了解。
tailwind CSS使开发人员能够创建他们想要的任何东西。在这里，您可以自由使用相同或相关的组件以适合您的偏好方式构建项目，而不必担心您的最终产品会类似于您之前构建的任何东西。尾风的多功能性使您即使使用类似的组件，也可以将不同的样式应用于各种网站。因此，这种能力可以加快您的开发过程，使您能够为客户提供有效的解决方案，最终提高开发效率。
下面，您会发现图像显示了使用相同的编码样式构建的各种组件。尽管他们共同基础，但您会注意到每个人都具有独特而独特的外观。

在尾风CSS中，组件率先。 Tailwind CSS为按钮，配置卡，化身，表格等提供了大量的预制组件。这是React开发人员的福音，因为它消除了对广泛的尾风CSS自定义的需求以及编写广泛的代码行的繁琐任务。通过利用这些组件，您可以避免重复的实用程序类，从而简化开发工作流程。在React中工作时，请考虑为多个文件中所需的样式创建专用组件，以增强代码可重复性。此外，我建议您深入研究Tailwind CSS官方网站的各种组件处理技术。
tailwind CSS在促进移动响应Web应用程序的创建方面也很出色。告别与自定义CSS中众多媒体查询的不断斗争，这可能会令人烦恼。 Tailwind CSS提供了响应迅速的效用变体，这些变体毫不费力地将用户界面调整到各种设备。下面，您会找到一个方便的通用设备实用程序列表，默认断点及其前缀以及CSS媒体查询：

 sm   :640px     min-width: 640px
 md   :768       min-width: 768px
 lg   :1024px    min-width: 1024px
 xl   :1280      min-width: 1280px
 2xl  :1536px    min-width: 1536px

为了对这些实用程序进行实际证明，请探索以下样本代码段及其相应的响应式输出。

尾风CSS包含最新和最先进的CSS功能。它为CSS网格和Flexbox，迷人的动画提供了实用程序，甚至支持时尚的黑暗模式。这些功能代表网页设计的最前沿，增强了您使用CSS创建现代，时尚网站的能力。
此框架提供了基本的编辑工具，例如Tailwind CSS Intellisense，无缝集成到Visual Studio Code等流行的IDE中。这种集成通过启用自动完整和其他增强生产力增强功能来简化开发。

对于Tailwind CSS开发人员来说，各种现成的组件正在等待。除了由创始公司创建的公司外，许多尾风组件库还提供成千上万种以各种样式设计的组件。大量资源加速了界面开发，消除了从头开始的必要性。有关最受欢迎的CSS框架组件库的更多详细信息可以在下面找到。
此外，最近熟练CSS的开发人员的需求激增。现在，许多公司都依靠逆风来进行前端，随着越来越多的开发人员拥抱尾风CSS，为开源项目提供了合作的机会。
有关CSS采用和使用趋势的视觉表示，请参阅下面的W3techs的图表：

使用Tailwind CSS的公司

在其Web应用程序中使用Tailwind CSS框架的公司列表无止境。这是主要的：
•开放著名聊天的父母
•Coursera
•Netflix全球前10名
•织机
•边缘
•硬币基本nft
•Shopify
•Twitch
•Mashable

尾风组件库

有各种尾风组件库，其中一些包括以下内容：

tailwind UI
这是精心制作的用户界面组件和使用Tailwind CSS框架构建的模板的高级集合。
无头UI
一组风格的，完全可访问的UI组件，可用作创建自定义设计的基础。由CSS的创建者建造。
shadcn
ShadCN结合了尾风的力量和艺术设计。设计精美的组件由Radix UI和尾风CSS构建。
tailkit
Tailkit为您的尾风CSS提供了一套精心制作，易于定制，完全响应的UI组件，模板和工具。
radix ui
Radix UI是一种尖端的工具包，旨在创建高级UI组件，重点是可访问性和用户体验。
PRELINE
PRELINE UI是基于公用事业优先的CSS框架的一组开源的预制UI组件。重点是高质量的设计。
雏菊UI
最受欢迎的尾风CSS组件库。 Daisy UI将组件类名称添加到Tailwind CSS中，因此您可以比以往任何时候都更快地制作美丽的网站。
超级UI
探索各种各样的现成组件，分为三个不同的类别：营销，电子商务和应用程序。
帆船UI
当代的尾风CSS组件库，具有150多个富含富集的应用程序和产品开发。每种都提供多种变化以适合您的要求。
尾风元素
有超过500个尾风组件。这些组件基于Bootstrap框架，但是它们具有更好的设计，并且功能更大。
尾风模板
这是一个包含各种免费和付费模板的库。他们有大约25个模板的集合，主要用于启动和SaaS（软件作为服务）。
tailwindblocks
旨在促进快速网站的原型开发和开发的预先定义的尾风CSS组件的集合。
mamba ui
它提供了150多种具有多功能风格的尾风组件和模板。它适用于各种框架，例如Angular，Vue，React，Svelte等。
sira
Sira具有可重复使用组件的设计系统。与VUE，React，Svelte等兼容。提供主题，暗模式和预定义的尾风样式。
tailwindgrids
该套件包含500多个互补和高级组件，块，部分和模板，提供了广泛的选择。

上面提到的代表最常见的组件库，我强烈建议在从事您的项目时尝试其中一些。阅读这篇文章并潜入逆风CSS将是您不会后悔的决定。

常见的误解

一些开发人员错误地将Tailwind CSS与内联CSS进行了比较，这不是一个好的做法。但是，这是一个误解。尾风CSS与内联CSS不同。与内联CSS不同，Tailwind允许您使用伪级和媒体查询等动画属性。此外，它促进了公用事业领先的方法，与内联CSS相比，CSS类别较少。

。

安装

我的第一个过渡到尾风的经历具有挑战性。我对JavaScript或NPM没有事先了解。安装尾风需要观看教程和阅读文章，这花了我大约一个星期。但是，本文集成了所有必要的信息，以获得更流畅的体验。这是逐步指南：

访问官方Node.js website并安装Node.js，其中包括Node软件包管理器（NPM）。
在您的PC上创建一个空文件夹，然后在您的首选IDE中打开它。建议使用Visual Studio代码。
使用Ctrl +`打开终端，然后按照以下步骤：

a。访问tailwind CSS的官方网站：Tailwind CSS
b。单击“启动”按钮。

转到框架指南；

选择Vite Framework;

C。对于将来的应用程序，我们正在考虑使用Vite框架安装tailwind，如React所建议，选择Vite的原因如下；

您可以按照提供的链接中的详细过程：Install Tailwind CSS using Vite

教程项目

为了帮助您应用本文中涵盖的所有内容，我们创建了一个使用尾风CSS设计计算器的教程。
代码如下：

<div class="w-64 mx-auto p-4 bg-gray-200 rounded-lg shadow-md"> <input type="text" class="w-full p-2 mb-2 bg-white border rounded" disabled> <div class="grid grid-cols-4 gap-2"> <button class="col-span-2 p-2 bg-gray-300 rounded hover:bg-gray-400">7</button> <button class="p-2 bg-gray-300 rounded hover:bg-gray-400">8</button> <button class="p-2 bg-gray-300 rounded hover:bg-gray-400">9</button> <button class="p-2 bg-orange-500 text-white rounded hover:bg-orange-600">/</button> <button class="p-2 bg-gray-300 rounded hover:bg-gray-400">4</button> <button class="p-2 bg-gray-300 rounded hover:bg-gray-400">5</button> <button class="p-2 bg-gray-300 rounded hover:bg-gray-400">6</button> <button class="p-2 bg-orange-500 text-white rounded hover:bg-orange-600">*</button> <button class="p-2 bg-gray-300 rounded hover:bg-gray-400">1</button> <button class="p-2 bg-gray-300 rounded hover:bg-gray-400">2</button> <button class="p-2 bg-gray-300 rounded hover:bg-gray-400">3</button> <button class="p-2 bg-orange-500 text-white rounded hover:bg-orange-600">-</button> <button class="col-span-2 p-2 bg-gray-300 rounded hover:bg-gray-400">0</button> <button class="p-2 bg-gray-300 rounded hover:bg-gray-400">.</button> <button class="p-2 bg-orange-500 text-white rounded hover:bg-orange-600">=</button> <button class="p-2 bg-orange-500 text-white rounded hover:bg-orange-600">+</button> <button class="col-span-2 p-2 bg-red-500 text-white rounded hover:bg-red-600">C</button> </div> </div>
输出如下所示；

结论

恭喜您做到这一点！如果您想知道如何掌握所有这些公用事业课程，请记住这种做法是完美的。利用官方网站的文档进行指导。
对于使用各种外部项目的实践，我建议使用Tailwind Play

感谢您与我一起学习！关注有关前端开发，JavaScript和软件开发中最佳实践的更多文章。

介绍