Tailwind CSS 是一个强大的 CSS 框架，它提供了一组可组合的预定义样式类，让前端开发变得更加快捷和高效。在本文中，我们将学习如何使用 Tailwind CSS 制作单页面多个按钮组合效果。
准备工作
在开始之前，您需要确保已经将 Tailwind CSS 包含在您的项目中。您可以通过 CDN 或 NPM 均可实现：
CDN
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@latest/dist/tailwind.min.css">
NPM
npm install tailwindcss
在您的项目中使用 Tailwind CSS，您可以通过以下方式从 CDN 或本地文件系统加载它。
<link rel="stylesheet" href="/path/to/tailwind.min.css">
制作多个按钮组合效果
在制作多个按钮组合效果时，我们需要针对按钮，为其添加样式类以达到各种效果。
按钮样式
使用 Tailwind CSS，您可以应用各种样式类来创建基本按钮样式。例如，将 bg-blue-600 样式类应用于按钮，将其背景颜色设置为蓝色。同样，将 text-white 样式类应用于按钮，将其文字颜色设置为白色。通过在按钮上应用几个这样的样式类，您可以创建自定义按钮：
<button class="px-4 py-2 bg-blue-600 text-white font-bold rounded"> My Button </button>
按钮组合样式
您可以通过 Tailwind CSS 提供的样式类，将几个按钮组合起来，以创建一个按钮条或一个按钮组。以下是一些示例。
垂直按钮组
将 flex 和 flex-col 样式类应用于包含按钮的父元素，并在每个按钮之间添加 mt-2 或 mb-2 样式类，以将它们与相邻的按钮分开。
-- -------------------- ---- -------
---- ----------- ----------
------- ------------------ ----------------- ---------- --------- ---- ---- ------- ------
------ -
---------
------- ------------------ ----------------- ---------- --------- ---- ---- ------- ------
------ -
---------
------- ------------------ ----------------- ---------- --------- ---- ---- ------- ------
------ -
---------
------水平按钮组
将 flex 样式类应用于包含按钮的父元素，并在每个按钮之间添加 ml-2 或 mr-2 样式类，以将它们与相邻的按钮分开。
-- -------------------- ---- -------
---- -------------
------- ------------------ ----------------- ---------- --------- ---- ---- ------- ------
------ -
---------
------- ------------------ ----------------- ---------- --------- ---- ---- ------- ------
------ -
---------
------- ------------------ ----------------- ---------- --------- ---- ---- ------- ------
------ -
---------
------工具栏按钮组
可以在水平按钮组的基础上进行扩展，为其添加 border 和 border-gray-400 样式，以创建工具栏的外观。
-- -------------------- ---- -------
---- ----------- ------ -----------------
------- ------------------ ----------------- ---------- --------- ---- ---- -----------
------ -
---------
------- ------------------ ----------------- ---------- --------- ---- ------
------ -
---------
------- ------------------ ----------------- ---------- --------- ---- ---- -----------
------ -
---------
------分页按钮组
按钮组的另一常见用例是实现分页。您可以使用 flex 和 space-x-2 样式类将按钮组成一行，使用 px-4 和 py-2 样式类为每个按钮定义大小，并使用 bg-blue-500 和 hover:bg-blue-700 样式类来设置按钮的背景色和悬停效果。
-- -------------------- ---- -------
---- ----------- -----------
------- ----------- ---- ----------- ----------------- ---------- --------- ---------
-
---------
------- ----------- ---- ----------- ----------------- ---------- --------- ---------
-
---------
------- ----------- ---- ----------- ----------------- ---------- --------- ---------
-
---------
------- ----------- ---- ----------- ----------------- ---------- --------- ---------
-
---------
------- ----------- ---- ----------- ----------------- ---------- --------- ---------
-
---------
------总结
通过使用 Tailwind CSS，您可以轻松地创建各种按钮组合效果，它们可以用于单页面应用程序。借助灵活的样式类组合，您可以将几个按钮组合在一起，以创建自定义的按钮条、工具栏、分页按钮等。
希望这篇文章对您有所帮助。如有任何疑问，请随时在下面的评论区留言。
示例代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------- ------------ ---- -------- -----------
----- ---------------- ---------------------------------
-------
----- ---------------- ---------
---- -------------
--- --------------- --------- ------------ ------------ ---- -------- --------
-- --------------------- ------------
---- ----------- ----------
------- ------------------ ----------------- ---------- --------- ---- ---- ------- ------
------ -
---------
------- ------------------ ----------------- ---------- --------- ---- ---- ------- ------
------ -
---------
------- ------------------ ----------------- ---------- --------- ---- ---- ------- ------
------ -
---------
------
-- ----------- ---------------- ------------
---- -------------
------- ------------------ ----------------- ---------- --------- ---- ---- ------- ------
------ -
---------
------- ------------------ ----------------- ---------- --------- ---- ---- ------- ------
------ -
---------
------- ------------------ ----------------- ---------- --------- ---- ---- ------- ------
------ -
---------
------
-- ----------- ------------------
---- ----------- ------ -----------------
------- ------------------ ----------------- ---------- --------- ---- ---- -----------
------ -
---------
------- ------------------ ----------------- ---------- --------- ---- ------
------ -
---------
------- ------------------ ----------------- ---------- --------- ---- ---- -----------
------ -
---------
------
-- ----------- ---------------------
---- ----------- -----------
------- ----------- ---- ----------- ----------------- ---------- --------- ---------
-
---------
------- ----------- ---- ----------- ----------------- ---------- --------- ---------
-
---------
------- ----------- ---- ----------- ----------------- ---------- --------- ---------
-
---------
------- ----------- ---- ----------- ----------------- ---------- --------- ---------
-
---------
------- ----------- ---- ----------- ----------------- ---------- --------- ---------
-
---------
------
------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ad13fc48841e989493a638