转载说明：原创不易，未经授权，谢绝任何形式的转载

今天看了一篇国外大佬对 Tailwind CSS 的看法，在这里分享给大家，看看大家是否赞同，以下是其相关内容的整理，由于翻译水平有限，欢迎大家讨论和指正。

开篇

我听说过Tailwind很长一段时间了，虽然它引起了我的注意，但我一直没有机会使用它。

我现在正在进行一个新项目，刚刚从JS和CCS转换到了Tailwind CSS。使用Tailwind一段时间后，我觉得是时候写一篇文章来分享我目前所发现的东西了。那么，让我们开始吧。

如何理解Tailwind CSS

Tailwind CSS不是典型的CSS框架。它是一个高度可定制的、以实用为先的工具，允许开发人员以简单的方式构建Web界面。

Tailwind CSS采用了提供广泛的实用类作为构建块的方法，使开发人员能够快速轻松地构建和样式化网站的任何部分。Tailwind CSS包含许多样式属性，从边距和填充到字体和颜色。每个实用类代表一个不同的CSS规则，使得在整个项目中应用和更改样式变得简单。

另外，使用Tailwind CSS可以轻松创建响应式设计。该框架包含了一系列专为响应式布局而设计的实用类。开发者只需使用这些类来根据屏幕尺寸指定多个样式即可。

但在我看来，Tailwind CSS真正擅长的地方是定制化。该框架配备了一个配置文件，允许开发人员根据自己项目的需求更改默认参数。这意味着可以指定特殊的颜色、字体、断点和其他元素。凭借如此高度的灵活性，Tailwind CSS非常有用，可以与项目独特的视觉语言融合在一起，实现统一且一致的设计系统。

为什么选择Tailwind CSS？

如前所述，Tailwind是一个功能强大且非常有趣的CSS框架，让我们来看看它带来的一些好处。

1、提升开发速度和效率

通过使用其广泛的实用类集合，您可以快速开发和构建用户界面，避免从头开始创建自定义CSS的需要。通过这样做，您可以专注于应用程序的基本功能和独特特性，同时节省时间。

2、高度可定制的方法

Tailwind CSS 提供了一个配置文件，使程序员能够自定义框架的多个方面。这包括指定独特的字体、断点和其他元素，以满足项目的独特设计要求。另一方面，Tailwind CSS 简化了网站主题的设置，使设计师能够产生多种视觉变化。他们可以通过配置文件指定不同的颜色方案、字体和其他样式属性。在处理具有不同品牌变体的项目或根据不同客户要求定制设计时，这种主题选项非常有用。

3、响应式设计轻松实现

该框架包含一系列专为响应式布局设计的实用类。使用这些类，您可以轻松开发适应不同屏幕尺寸和设备的界面。这消除了您编写复杂媒体查询的需求，并使您能够在各种设备上提供出色的用户体验。

4、提升代码可维护性

Tailwind CSS 提供了一种模块化和可重用的样式方法。您可以通过实用类轻松更新和调整样式，而不必担心传统 CSS 中常见的级联效应。这种模块化不仅提高了代码的可维护性，还增强了开发团队之间的协作。开发人员可以分别处理不同的组件，而不会出现样式冲突的风险，从而实现更高效和简化的开发流程。

闪光的并非都是黄金

当然，Tailwind也不例外，就像其他任何框架一样，它也有一些缺点，让我们来看看其中一些。

1、学习曲线

Tailwind CSS有自己的一套实用类和独特的样式方法。对于习惯于使用传统CSS框架的开发人员来说，这可能需要一些学习曲线。熟悉实用类并理解如何有效地利用它们可能需要一些时间和努力。

2、文件大小增加了

由于Tailwind CSS提供了大量的实用类库，与使用预构建组件的框架相比，它可能导致较大的CSS文件大小。虽然有方法可以优化和减小最终的CSS文件，但在页面加载时间方面要特别注意，尤其是对于性能至关重要的项目。

3、过度使用工具类

由于Tailwind CSS实用类的灵活性和便利性，存在滥用的风险，这可能导致HTML标记冗长和代码可读性降低。保持平衡并维护一个干净和可管理的代码库非常重要。

4、设计一致性有限

Tailwind CSS提供了广泛的实用类，但它缺乏预定义的组件样式。这意味着在不同项目中实现一致的视觉设计或维护严格的设计系统可能需要额外的努力。开发人员需要在项目中投入时间和精力来定义和执行设计准则。

5、定制复杂性

尽管Tailwind CSS通过其配置文件提供了自定义选项，但广泛的自定义有时可能会复杂且耗时。定义自定义颜色、断点和其他样式属性可能需要对框架及其配置选项有深入的了解。

如何在您的项目中的实施

Tailwind拥有非常周到和清晰的文档，您可以在其中找到实施它在您的项目中的指南，根据您的需求有不同的方法，所以我会直接在这里留下链接供您查看

https://tailwindcss.com/docs/installation

关于大佬的点评

在过去的几年中，Tailwind CSS在行业中变得非常流行，当你了解它所带来的能力时，这一点并不令人惊讶。它的实用主义方法、广泛的自定义选项以及对速度和效率的强调，使其成为快速创建令人惊叹且响应式的网站的宝贵工具。

我认为Tailwind是一个非常有趣的选择，可以添加到任何项目中，特别是我目前正在工作的这个项目，这是一个庞大的项目，有很多开发人员在上面工作，每个品牌都有不同的主题，我认为从JS和CCS迁移到Tailwind CSS是非常有意义的。

我的看法

总的来说，Tailwind CSS是一个强大且灵活的工具，特别适用于快速创建响应式和高度可定制的网站。然而，开发团队需要权衡其优点和缺点，以确定是否适合他们的项目需求。

Tailwind CSS不同于传统的CSS框架，它强调实用性，让我们能够迅速构建网页界面，无需为自定义CSS样式大费周章。更妙的是，它提供了高度的可定制性，让我们能够根据项目需求进行灵活调整。

尽管有一些学习曲线，而且需要小心不要滥用实用类，但它的优点远大于缺点。对于提高开发效率、实现响应式设计、增强代码可维护性，以及在大型多品牌项目中提供一致的设计语言，Tailwind CSS都是一个强有力的工具。我推荐将它引入你的项目中，特别是对于那些需要高度自定义和快速迭代的项目。

由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。