为什么 Bootstrap 用户应该在下一个项目中考虑使用 Tailwind CSS？

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 文件：

<link href="/path-to-your-styles.css" rel="stylesheet">

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

2. 理解顺风理念

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

示例：创建网格布局

引导程序：

<div class="container">
  <div class="row">
    <div class="col-md-6">Column 1</div>
    <div class="col-md-6">Column 2</div>
  </div>
</div>

顺风：

<div class="grid grid-cols-2 gap-4">
  <div>Column 1</div>
  <div>Column 2</div>
</div>

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

3. Tailwind 的版式和间距

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

示例：添加版式和填充

引导程序：

<h1 class="display-4">Hello, Bootstrap!</h1>
<p class="lead">This is a lead paragraph.</p>
<button class="btn btn-primary">Click Me</button>

顺风：

<h1 class="text-4xl font-bold">Hello, Tailwind!</h1>
<p class="text-lg">This is a lead paragraph.</p>
<button class="bg-blue-500 text-white px-4 py-2 rounded">Click Me</button>

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

4.响应式设计

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

示例：使元素响应

引导程序：

<div class="col-sm-12 col-md-6">Responsive Column</div>

顺风：

<div class="w-full md:w-1/2">Responsive Column</div>

在 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',
      },
    },
  },
}

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

<button class="bg-primary text-white">Custom Button</button>

6. 将 Bootstrap 组件迁移到 Tailwind

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

按钮组件

引导程序：

<button class="btn btn-primary">Submit</button>

顺风：

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Submit
</button>

导航栏组件

引导程序：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
</nav>

顺风：

<nav class="flex items-center justify-between p-6 bg-gray-100">
  <a class="text-xl font-bold" href="#">Brand</a>
</nav>

通过学习 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. Level Up with Metronic 9 – All-in-One Tailwind UI Toolkit

If you're looking for a Tailwind CSS experience that combines the simplicity and familiarity of Bootstrap, look no further than Metronic 9!

Metronic 9 is an all-in-one Tailwind UI toolkit that brings the best of both worlds: the utility-first power of Tailwind CSS, paired with the structured and component-driven approach you're familiar with from Bootstrap.

Why Choose Metronic 9 for Your Tailwind Projects?

• Popular & Trusted: Released back in 2013, Metronic became the number one Admin Dashboard Template on Envato Market with 115,000 sales, and 8000 5-star reviews powering over 3000 SaaS projects worldwide.

• Pre-Built Components: Just like Bootstrap, Metronic 9 comes with hundreds of ready-to-use components like buttons, navbars, modals, forms, and more — all powered by Tailwind CSS utilities. This allows you to quickly build modern, responsive UIs without writing custom styles from scratch.

• Tailwind + Bootstrap Experience: You get the flexibility of Tailwind with the structured feel of Bootstrap. Whether you’re migrating from Bootstrap or starting fresh, you’ll find the learning curve minimal.

• Multiple Layouts: With over 5 app layout demos and 1000+ UI elements, Metronic 9 lets you build complex applications quickly and easily, whether you're working on a SaaS dashboard, admin panel, or a general web app.

• Seamless Integration: Metronic 9 integrates perfectly with modern frameworks like React, Next.js, and Angular, giving you a head start on your Tailwind journey with a Bootstrap-like ease of use.

Get Started with Metronic 9 Today!

If you’re transitioning from Bootstrap and want a familiar, feature-packed environment to work with Tailwind, Metronic 9 is the perfect solution. It's designed to save you time and effort, letting you focus on building great products, without getting bogged down by design details.

? Check out Metronic 9 here and start creating beautiful UIs with Tailwind’s flexibility and Bootstrap’s simplicity!

9. Conclusion: Is Tailwind the Right Choice for You?

If you’re looking for more customization and control over your design without being restricted by pre-built components,
Tailwind CSS is a great choice. It may take some time to adjust if you’re used to Bootstrap, but once you get comfortable with the utility-first approach, the possibilities are endless!

Feel free to ask any questions or share your experiences in the comments below. Happy coding! ?

以上是为什么 Bootstrap 用户应该在下一个项目中考虑使用 Tailwind CSS？的详细内容。更多信息请关注PHP中文网其他相关文章！