Tailwind CSS 入门 Bootstrap 用户指南

大家好！ ？如果您是 Bootstrap 的长期用户，并且对过渡到 Tailwind CSS 感到好奇，那么本指南适合您。 Tailwind 是一个实用程序优先的 CSS 框架，与 Bootstrap 基于组件的结构相比，它提供了完全不同的方法。让我们深入了解如何作为 Bootstrap 用户轻松开始使用 Tailwind！

这个改进的版本确保所有代码块都正确格式化和缩进，使指南更易于阅读和遵循。

？为什么选择 Tailwind CSS？

在进入教程之前，先对 Bootstrap 和 Tailwind 进行快速比较：

• Bootstrap：一个基于组件的框架，提供具有固执己见的设计的预构建 UI 组件。
• Tailwind：一个实用程序优先的框架，允许您使用低级实用程序类设计组件的样式，从而提供更大的灵活性和控制力。

当您需要高度定制的设计时，Tailwind 会大放异彩，但如果您习惯了 Bootstrap，它可能会感到陌生。那么让我们一步步分解吧。

1. 在项目中设置 Tailwind

第 1 步：安装 Tailwind CSS

要开始使用 Tailwind CSS，您需要将其安装到您的项目中。请按照下列步骤操作：

• 通过 npm 安装 Tailwind：

  npm install -D tailwindcss postcss autoprefixer
  npx tailwindcss init

• 在 tailwind.config.js 文件中，设置内容数组以确保 Tailwind 扫描您的项目中的类：

  module.exports = {
    content: [
      './public/**/*.html',
      './src/**/*.{html,js}',
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }

第 2 步：创建 CSS 文件

现在，使用以下 Tailwind 指令在项目中创建一个 styles.css 文件：

@tailwind base;
@tailwind components;
@tailwind utilities;

第 3 步：在 HTML 中包含 Tailwind

在您的 HTML 文件中，链接生成的 CSS 文件：

您现在已准备好开始在项目中使用 Tailwind！

2. 理解顺风理念

如果您习惯了 Bootstrap 的类，如 .container、.row 和 .col-6，那么切换到 Tailwind 可能会感觉是一个很大的改变。在 Bootstrap 中，布局和设计决策被抽象为组件，而在 Tailwind 中，您可以使用实用程序类完全控制设计。

示例：创建网格布局

引导程序：

  

    
Column 1
    
Column 2
  

顺风：

  
Column 1
  
Column 2

在 Tailwind 中，grid 和 grid-cols-2 类取代了 Bootstrap 的 row 和 col 系统。 gap-4 类增加了网格项之间的间距，您可以通过调整实用程序类来根据需要调整所有内容。

3. Tailwind 的版式和间距

Bootstrap 和 Tailwind 之间的一个主要区别是排版和间距的处理方式。

示例：添加版式和填充

引导程序：

Hello, Bootstrap!
This is a lead paragraph.
Click Me

顺风：

Hello, Tailwind!
This is a lead paragraph.
Click Me

在 Tailwind 中，没有预定义的按钮或标题样式。相反，您可以直接应用实用程序类（text-4xl、bg-blue-500、px-4 等）来完全按照您想要的方式构建您的设计。

4.响应式设计

Bootstrap 用户喜欢的一件事是响应式网格系统。 Tailwind 还具有出色的响应式实用程序，但您可以使用 Tailwind 的响应式前缀控制不同屏幕尺寸的样式，而不是依赖预定义的断点。

示例：使元素响应

引导程序：

Responsive Column

顺风：

Responsive Column

在 Tailwind 中，w-full 确保元素在较小的屏幕上占据整个宽度，而 md:w-1/2 应用从 md 断点（中等屏幕尺寸）开始的 50% 宽度。

5. 定制 Tailwind

就像您可以自定义 Bootstrap 变量一样，您可以扩展 Tailwind 的实用程序类或创建您自己的自定义设计系统。在你的 tailwind.config.js 中，你可以扩展或修改默认主题：

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#1DA1F2',
        secondary: '#14171A',
      },
    },
  },
}

通过此配置，您可以使用自定义颜色，如下所示：

Custom Button

6. 将 Bootstrap 组件迁移到 Tailwind

如果您想在 Tailwind 中重新创建常见的 Bootstrap 组件（如按钮、导航栏和模式），那么关键在于使用正确的实用程序。以下是一些示例：

按钮组件

引导程序：

Submit

顺风：

  Submit

导航栏组件

引导程序：

顺风：

通过学习 Tailwind 的实用程序类，您可以比 Bootstrap 的预构建样式更灵活地构建复杂的组件。

7. 使用 Tailwind 插件

Tailwind 拥有丰富的插件生态系统，可扩展其功能。例如，您可以轻松添加表单、排版或宽高比实用程序：

npm install @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio

在你的 tailwind.config.js 中：

module.exports = {
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
  ]
}

8. 使用 Metronic 9 升级 – 一体化 Tailwind UI 工具包

如果您正在寻找结合了 Bootstrap 的简单性和熟悉性的 Tailwind CSS 体验，那么 Metronic 9 就是您的最佳选择！

Metronic 9 是一款一体化 Tailwind UI 工具包，它集两全其美：Tailwind CSS 实用至上的强大功能，与您熟悉的 Bootstrap 结构化和组件驱动方法相结合。

为什么为您的 Tailwind 项目选择 Metronic 9？

• 受欢迎且值得信赖：Metronic 于 2013 年发布，成为 Envato 市场上排名第一的管理仪表板模板，销量达 115,000 份，并获得 8000 条 5 星级评论，为全球 3000 多个 SaaS 项目提供支持。

• 预构建组件：就像 Bootstrap 一样，Metronic 9 附带了数百个即用型组件，如按钮、导航栏、模式、表单等 - 所有这些均由 Tailwind CSS 实用程序提供支持。这使您可以快速构建现代的、响应式的 UI，而无需从头开始编写自定义样式。

• Tailwind Bootstrap 体验：您可以获得 Tailwind 的灵活性和 Bootstrap 的结构化感觉。无论您是从 Bootstrap 迁移还是重新开始，您都会发现学习曲线很短。

• 多种布局：Metronic 9 拥有超过 5 个应用程序布局演示和 1000 个 UI 元素，让您可以快速轻松地构建复杂的应用程序，无论您是在 SaaS 仪表板、管理面板还是一般 Web 应用程序上工作。

• 无缝集成：Metronic 9 与 React、Next.js 和 Angular 等现代框架完美集成，通过类似 Bootstrap 的易用性让您在 Tailwind 之旅中领先一步。

立即开始​​使用 Metronic 9！

如果您从 Bootstrap 过渡并想要一个熟悉的、功能丰富的环境来使用 Tailwind，Metronic 9 是完美的解决方案。它旨在节省您的时间和精力，让您专注于构建出色的产品，而不会陷入设计细节的困境。

？在这里查看 Metronic 9 并开始利用 Tailwind 的灵活性和 Bootstrap 的简单性创建漂亮的 UI！

9. 结论：Tailwind 是您的正确选择吗？

如果您正在寻求对设计的更多定制和控制，而不受预构建组件的限制，
Tailwind CSS 是一个不错的选择。如果您习惯了 Bootstrap，可能需要一些时间来调整，但一旦您习惯了实用程序优先的方法，可能性是无限的！

请随时在下面的评论中提出任何问题或分享您的经验。快乐编码！ ？