创建按钮

现在你知道Utilize Class的样子，让我们使用Utilize Class来创建一个按钮。

<button class="bg-indigo-700 font-semibold text-white py-2 px-4 rounded">前端晚间课</button>

在py-2中，上下设置了.5rem padding，在px-4中，左右设置了1rem padding。在圆形中，边界半径 .25rem 被应用并且角被圆化。

Tailwind CSS 自定义

由于按钮是一个很有可能被重用的组件，并且你希望在应用程序中统一设计，你可以注册Utilize Class集来创建按钮作为另一个类。

打开预构建的 css / style.css 文件并在 @components 和 @utility 指令之间添加以下内容。

@tailwind base;

@tailwind components;

.btn{
    @apply font-semibold text-white py-2 px-4 rounded;
}

@tailwind utilities;
复制代码

然后重新构建一下，npm run build,

会覆盖构建完后的public/css/style.css，所以打开style.css文件，搜索btn

可以看到刚才用@apply 添加的内容已经作为css添加到style.css文件中了,

.btn{
  font-weight: 600;
  color: #fff;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 0.25rem;
}
复制代码

使用 btn 类和添加的按钮创建，只将背景颜色更改为红色。

<div class="text-center mt-10">
    <button class="bg-indigo-700 font-semibold text-white py-2 px-4 rounded">前端晚间课</button>
    <button class="bg-red-700 btn">前端晚间课</button>
</div>
复制代码