Tailwind CSS 简介 – 实用程序优先的框架

在本文中，我们将探索 Tailwind CSS，这是一种流行的实用程序优先 CSS 框架，可让您快速构建现代网站，而无需编写自定义 CSS。与传统的 CSS 框架不同，Tailwind 不附带预先设计的组件，而是提供实用程序类，让您直接在 HTML 中设置元素的样式。

1.什么是 Tailwind CSS？

Tailwind CSS 是一个实用程序优先的框架，这意味着它专注于为您提供小型、可重用的类来应用样式。您无需编写自定义样式，而是使用预定义的类来构建布局和组件。

例子：

    Click Me

在这里，您可以看到正在使用的多个实用程序类：

• bg-blue-500：设置背景颜色。
• text-white：应用白色文本。
• font-bold：使文本加粗。
• py-2 px-4：添加垂直和水平填充。
• rounded：使按钮的角变圆。

2.为什么选择顺风？

Tailwind 的方法不同于 Bootstrap 等传统 CSS 框架。它不提供预构建的组件，而是鼓励开发人员通过编写实用程序类来创建自定义设计。这将带来更加灵活和可定制的工作流程。

优点：

• 更快的开发：无需编写自定义CSS。
• 设计一致性：实用程序允许设计一致性，而无需重复样式。
• No Dead CSS：在生产中可以轻松清除未使用的样式。

缺点：

• 类重的 HTML：您的 HTML 可能会充满类，一开始可能会让人不知所措。
• 学习曲线：需要学习 Tailwind 特定的实用程序。

3.设置 Tailwind CSS

要开始使用 Tailwind CSS，您可以使用 CDN（对于简单项目）或 通过 npm 安装它（对于更复杂的工作流程）。

CDN 设置：

您可以通过在 HTML 文件中添加以下链接来快速开始使用 Tailwind：

npm 设置（对于较大的项目）：

如果您正在开发一个更大的项目，您可能需要通过 npm 安装 Tailwind CSS：

npm install tailwindcss

安装后，您可以生成 tailwind.config.js 文件来自定义您的设置并将其与构建过程集成。

结论

Tailwind CSS 是一款游戏规则改变者，适用于寻求简化方法来快速创建自定义设计的开发人员。它允许您通过直接在 HTML 中编写小型实用程序类来构建响应灵敏、灵活且一致的网站。

在 LinkedIn 上关注我

里多伊·哈桑