Tailwind 中使用 @apply 解决代码不调和的烦恼

前言

在进行前端开发的过程中，我们经常需要用到 CSS。CSS 总体来说比较灵活，可以通过自己写样式表来实现多种效果。然而，CSS 固有的灵活性也常常导致代码难以维护，特别是在项目逐渐扩大的时候。Tailwind 是一个实用性工具集，可以让前端开发人员能够以快速而一致的方式构建现代的、可访问的用户界面。本文将介绍一个核心功能 @apply，它将帮助开发人员轻松解决代码不调和的烦恼。

什么是 @apply

Tailwind 中的 @apply 可以使用一个 CSS class 代表其他 CSS 属性的组合，从而使 CSS 更简洁、更易于管理。

在使用 @apply 时，我们可以先创建一个带有一组属性的类，然后通过 @apply 将其应用到其他元素中。这样的做法可以让我们更快地比较、查看和调整样式。

下面是一个使用 @apply 实现的样例：

// www.javascriptcn.com code example
.my-button {
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px;

  &.my-button-primary {
    background-color: #0275d8;
    border-color: #0275d8;

    &:hover {
      background-color: #025aa5;
      border-color: #025aa5;
    }
  }
}

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

上面的代码创建了一个按钮类 "my-button"，它有一组属性。接着，创建一个 "my-button-primary" 类，使用 @apply 将 "my-button" 类的属性应用到 "my-button-primary" 中。最后，将这个类应用到一个按钮中，即可获得一个具有预定义样式的按钮。

如何使用 @apply

1. 在样式文件中，创建一个类，例如：.my-button

// www.javascriptcn.com code example
.my-button {
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px;
}

1. 在创建好的类后，再创建一个以初始类名为前缀的类，即：.my-button-primary

// www.javascriptcn.com code example
.my-button-primary {
  @apply my-button;
  background-color: #0275d8;
  border-color: #0275d8;

    &:hover {
    background-color: #025aa5;
    border-color: #025aa5;
  }
}

可以看到，在创建 .my-button-primary 时，我们使用了 @apply 将 .my-button 中的样式应用到其中。之后，我们又添加了一些其他样式以创建出一个蓝色的主要按钮。

1. 应用创建的样式

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

指导意义

通过使用 @apply 可以更有效地组织 CSS 样式，并可以轻松应用样式。我们可以根据自己的使用习惯，为不同的类别创建不同的属性组合，并借助 @apply 让这些属性更加清晰有序。这可大大减少样式表的代码量，并加快代码的编写和阅读速度。

同时，使用 @apply 的技巧也可以使我们避免创建重复的代码，避免在需要修改样式时，需要逐一修改单个元素的样式，这也大大提高开发效率。

结语

使用 @apply 是让 Tailwind 代码更整洁、更易读的重要工具。通过这篇文章，希望开发人员们掌握此技能后，可以更加快捷地操作 CSS 样式，欢迎大家尝试使用，并欢迎提出宝贵的意见和建议。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d7a21da941bf7134dace38