為什麼 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中文網其他相關文章！