前言
在现代 Web 开发中，UI 设计风格多种多样，但按钮是构成交互的重要组件之一。在不同页面和应用程序中，我们可能需要使用各种不同样式的按钮，从而实现更好的用户体验。为了快速的搭建出各种不同样式的按钮，使用 Tailwind CSS 创建一个通用的按钮组件库是一个不错的选择。
在本文中，我们将介绍如何使用 Tailwind CSS 创建一个通用的按钮组件库，并让按钮在不同场景下呈现不同的样式。
准备工作
首先，我们需要安装 Tailwind CSS。可以使用 npm 进行安装，也可以直接引入 Tailwind CSS 的 CDN 地址。本文中，我们将使用 npm 进行安装和构建。
npm install tailwindcss然后，我们需要在项目根目录中创建一个名为 tailwind.config.js 的配置文件，并将以下代码保存在其中：
module.exports = { purge: [], theme: {}, variants: {}, plugins: [], };
创建一个基本按钮组件
首先，我们需要创建一个基本按钮组件，它将是我们组件库的基础。在 index.html 文件中添加以下代码：
<button class="btn">按钮</button>
在 tailwind.config.js 文件中添加以下代码：
-- -------------------- ---- ------- -------------- - - ------ --- ------ - ------- - ------- - -------- ---------- ---------- --------- - -- -- --------- --- -------- --- --展开代码
在 style.css 文件中添加以下代码：
-- -------------------- ---- ------- ---- - -------- ------------- -------- ------ ----- ---------- ----- ------------ ---- ------ ----- ----------------- -------- ------- ----- -------------- -------- ----------- ---------------- ---- ----- - ---------- - ----------------- -------- -展开代码
现在，我们就创建了一个基本的蓝色按钮，并在其中添加了基本的 Tailwind CSS 类。
创建一个折叠按钮组件
接下来，我们将创建一个特殊样式的按钮组件。这个按钮是一个可以折叠的按钮，它将在用户单击时切换打开和关闭状态。
<button class="btn btn-collapse">按钮</button>
在 tailwind.config.js 文件中添加以下代码：
-- -------------------- ---- ------- -------------- - - ------ --- ------ - ------- - ------- - -------- ---------- ---------- --------- -- ------- - ------ -------- - -- -- --------- --- -------- --- --展开代码
在 style.css 文件中添加以下代码：
-- -------------------- ---- ------- ------------- - --------- --------- -------------- ------- - ------------------- - -------- --- --------- --------- ---- ---- ------ -------- ------ ---- ------- ---- ------------ --- ----- ------------- -------------- --- ----- ------------- ----------- --------- ---- ----- ---------- --------------- ----- ---------- - -------------------------- - ---------- --------------- ----- --------------- - -------------------- --------- - ------ ----- - -------------------- --------- - ----- ----- - ------------- --------- - -------- ------------- --------------- ------- - ------------- --------- - -------- ------------- --------------- ------- ----------- ---- ---- ----- ----- ------------- -展开代码
这里，我们使用了 Tailwind CSS 的 rotate 类来添加某些按钮组件效果，同时为按钮组件添加了类 btn-collapse 表示这是一个可以折叠的按钮。使用 :after 伪元素添加一个箭头图标，使用 active 类来标记按钮是否已被单击。
创建一个带边框的按钮组件
我们可以使用 Tailwind CSS 类创建一个带边框的按钮组件，这个按钮组件将有一个简单的外观，但会更加突出，使它在页面上更加醒目。
<button class="btn btn-outline">按钮</button>
在 tailwind.config.js 文件中添加以下代码：
-- -------------------- ---- ------- -------------- - - ------ --- ------ - ------- - ------- - -------- ---------- ---------- --------- -- ------------ - ---- ----- - -- -- --------- --- -------- --- --展开代码
在 style.css 文件中添加以下代码：
-- -------------------- ---- ------- ------------ - ----------------- ------------ ------- --- ----- -------- ------ -------- - ------------------ - ----------------- -------- ------ ----- - ------------------- ------------------- - ----------------- ------------------ ------ --------------- ----------- - - - --- -------- -------- ----- -展开代码
我们使用 borderWidth 类添加了边框宽度，使用 btn-outline 类添加了边框的样式，使它成为一个带边框的按钮。我们还使用 focus 类和样式设置添加了一个焦点状态，同时使用 !important 来强制禁用样式重写。
创建一个带图标的按钮组件
最后，我们将创建一个带有图标的按钮组件。这个按钮将具有一个带有垂直居中图标的按钮文本，并且在用户单击时，旋转图标 360 度。
<button class="btn btn-icon"> <svg class="icon" viewBox="0 0 24 24"> <path d="M12 18c-.5 0-1-.2-1.4-.6l-7-7c-.8-.8-.8-2 0-2.8s2-.8 2.8 0L12 13.2l7.6-7.6c.8-.8 2-.8 2.8 0s.8 2 0 2.8l-8 8c-.4.4-.9.6-1.4.6z" /> </svg> <span class="btn-text">按钮</span> </button>
在 tailwind.config.js 文件中添加以下代码：
-- -------------------- ---- ------- -------------- - - ------ --- ------ - ------- - ------- - -------- ---------- ---------- --------- -- ------- - ------ -------- - -- -- --------- --- -------- --- --展开代码
在 style.css 文件中添加以下代码：
-- -------------------- ---- ------- --------- - -------- ------------ ------------ ------- -------- ------ ----- ---------- ----- ------------ ---- ------ -------- ----------------- ------------ ------- ----- -------------- -------- ----------- --- ---- ----- - --------------- - ----------------- -------- ------ ----- ---------- ----------------- - ---------------- ---------------- - ----------------- ------------------ ------ --------------- ----------- - - - --- -------- -------- ----- - ----- - -------- ------------- ------------- ------- ------ -------- ------- -------- ----- ------------- ----------- --------- --- ----- - ---------------- ----- - ---------- --------------- - --------- --------- - --------- --------- ---- ----- -展开代码
这里，我们使用了 align-items 类和 inline-flex 属性解决了图标和文本垂直居中的问题。我们还添加了类名 btn-icon，并通过 icon 类设置了 SVG 图标的大小和填充颜色。我们还添加了 active 类来设置图标的旋转动画，使它在用户单击后开始旋转。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c447956e1fc40e36d2cac8
