如何在Tailwind CSS中通过@apply指令重构冗长的HTML类？-css教程-PHP中文网

使用 @apply 指令可以将重复的 tailwind css 类名提取到自定义 css 类中，从而简化 html 结构。具体做法是在 .css 文件中定义一个类，利用 @apply 引用所需的 tailwind 工具类，然后在 html 中直接使用该自定义类名即可。

如何在Tailwind CSS中通过@apply指令重构冗长的HTML类？

如何定义包含多个工具类的自定义组件类？

在样式表中创建一个新的类选择器，通过 @apply 依次列出需要组合的 Tailwind 类名，这样就能将分散的样式逻辑集中管理。例如，可以将按钮的间距、背景色和圆角合并为一个名为 .btn-primary 的类，HTML 中只需引用这一个类名。

如何在Tailwind CSS中通过@apply指令重构冗长的HTML类？

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

/* index.html */
<button class="btn-primary">Click Me</button>

运行上述代码后，生成的按钮将具备蓝色背景、白色文字、加粗字体以及适当的内边距和圆角。这种写法不仅减少了 HTML 标签内的类名数量，还提高了样式的可维护性，当需要调整按钮样式时，只需修改 CSS 文件中的 @apply 规则即可。

如何处理带有变体（如悬停状态）的复杂组件？

对于需要响应式或伪类状态的组件，可以在 @apply 中直接使用带前缀的变体类，或者结合 :hover 等伪类选择器进行更精细的控制。例如，定义一个卡片组件，默认状态下有阴影和圆角，悬停时增加阴影深度并轻微上浮。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

如何在Tailwind CSS中通过@apply指令重构冗长的HTML类？

/* components.css */
.card {
    @apply bg-white shadow-md rounded-lg p-6 transition-all duration-300;
}

.card:hover {
    @apply shadow-xl -translate-y-1;
}

应用该组件后，鼠标悬停在卡片上时会触发平滑的过渡动画，阴影加深且位置微升。这种方式允许开发者在不编写大量重复 CSS 属性的前提下，复用 Tailwind 强大的设计系统，同时保持 HTML 的简洁性。需要注意的是，@apply 会在构建时展开为具体的 CSS 属性，因此不会带来运行时性能开销。

在 @apply 中使用任意值语法需要注意什么？

当需要在 @apply 中引入非标准 Tailwind 配置的值时，可以使用方括号语法 [value]。例如，设置一个自定义颜色或尺寸，可以直接在 @apply 中写入 bg-[#ff0000]。这种做法虽然灵活，但会破坏主题的一致性，建议仅在必要时使用，并尽量将其封装在自定义类内部，避免在 HTML 中直接暴露复杂的样式逻辑。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！