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 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中文网其他相关文章！
