首页 > 文章列表 > Tailwind 提示:用一行代码管理一长串实用程序类

Tailwind 提示:用一行代码管理一长串实用程序类

499 2024-12-23

Tailwind 提示:用一行代码管理一长串实用程序类

在一行中管理一长串实用程序类可能会变得笨拙。

这是 tailwind 的内置功能 @apply,可以帮助您的代码更具可读性和可管理性:

在自定义css中使用@apply

使用 tailwind 的 @apply 指令,您可以通过对多个 tailwind 实用程序进行分组来创建可重用的 css 类。这有助于减少 html 中的类数量,并使您的组件更有条理。

示例:

/* styles.css */
.btn-primary {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}

然后您可以在 html 中使用这个新的 .btn-primary 类 而不是重复 tailwind 实用程序:

<button class="btn-primary">Primary Button</button>

如果对您有帮助,您可以支持一下:
https://buymeacoffee.com/kaleemelahi


关注更多:
领英
github

来源:https://dev.to/kaleemelahi/tailwind-tip-managing-a-long-list-of-utility-classes-in-a-single-line-of-code-5dh7

本类最新

查看更多