Tailwind CSS 提供了大量预定义的实用程序,可帮助 Web 开发人员创建响应式和交互式 Web 设计和布局。一个这样的实用程序是@apply——一个 Tailwind CSS 指令,它允许开发人员将一组实用程序组合到一个可重用的组件类中。在本文中,我们将深入研究该@apply指令,突出其用途,并发现它如何可能取代 Tailwind CSS 中对复杂类的需求。
Tailwind CSS 是一个基于开源实用程序的 CSS 框架,它提供了一组可自定义的实用程序来构建网页设计和布局。
Tailwind CSS 与其他流行的 CSS 框架(如 Bootstrap 和 Material UI)的主要区别在于它不包含按钮和表格等组件的预设类集合。相反,它包括用于网格、边距、表单、位置等的大量实用程序类。
Tailwind CSS 会自动删除任何无关的 CSS,从而在为生产构建时生成尽可能短的 CSS 包。
如何将 Tailwind CSS 安装到您的项目中
Tailwind CLI 工具是从头开始将 Tailwind CSS 嵌入项目的最快捷、最简单的方法。在开始之前检查您是否安装了 Node.js。
第 1 步:使用以下命令将 Tailwind CSS 安装到您的项目中:
npm install -D tailwindcss
第 2 步:然后,tailwind.config.js使用以下命令创建一个文件:
npx tailwindcss init
第 2 步:在您的tailwind.config.js文件中,将路径添加到所有模板文件,如下所示:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
第 3 步:将@tailwind指令添加到您的主 CSS 文件以表示 Tailwind 的每个层。
@tailwind base;
@tailwind components;
@tailwind utilities;
第 4 步:将已编译的 CSS 文件添加到<head>标记文件中,并开始使用 Tailwind 的实用程序类对内容进行样式设置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/styles.css" rel="stylesheet">
<title>Tailwind CSS Tutorial</title>
</head>
<body>
<div class="bg-gradient-to-t">
<aside class="rounded-sm"></aside>
<img src="/images/pig.jpg" alt="">
</div>
</body>
</html>
开始使用 Tailwind CSS @apply
Tailwind CSS 的@apply指令是 Tailwind CSS 生态系统中一个相对较新的功能,它允许开发人员根据他们的自定义 CSS “应用”现有的实用程序类。当您需要编写自定义 CSS(例如,覆盖第三方库中的样式)但仍想使用您的设计标记并使用与在 HTML 中相同的语法时,这很方便。
这是一个简单的例子:
@tailwind base;
@tailwind components;
@tailwind utilities;
.class {
background-color: blue;
border-radius: 50%;
}
/* re-using the styling for the first class here */
.class-2 {
@apply class;
}
/* applying Tailwind CSS utility classes */
.another__class {
@apply border border=gray-300 rounded;
}
如何在下一个项目中使用@apply 指令
@apply允许您重用预设的实用程序类来为应用程序中的多个组件设置样式。您还可以将其功能与其他前端框架结合使用,例如 Bootstrap。
考虑下面的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- using Bootstrap CSS Classes -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<title>Tailwind CSS Tutorial</title>
<style>
@tailwind base;
@tailwind components;
/* applying utility classes to Bootstrap components */
.btn-primary {
@apply px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700;
}
.btn-success {
@apply px-4 py-2 font-bold text-white bg-green-500 rounded hover:bg-green-700;
}
.btn-danger {
@apply px-4 py-2 font-bold text-white bg-red-500 rounded hover:bg-red-700;
}
@tailwind utilities;
</style>
</head>
<body>
<div class="m-1">
<button class="btn btn-primary">Button</button>
<button class="btn btn-success">Success Button</button>
<button class="btn btn-danger">Danger Button</button>
</div>
</body>
</html>
@apply在上面的代码中,我们使用导入预设实用程序类的指令创建了三个按钮。
结果如下:
您可能会发现这些按钮共享各种实用程序类。这些实用程序类可用于我们按钮的任何变体的基本样式。考虑一个有 25 个按钮的应用程序。然后我们必须编写 25 次公共实用程序类(用于基本样式)。这可能会导致维护问题,因为更新通用实用程序类需要您在整个应用程序的 25 个不同位置执行此操作,这很快就会变得复杂和冗余。
在这种情况下,您可以使用该@apply指令将标准实用程序类转换为自定义 CSS 类。我们可以避免以这种方式复制传统的实用程序类。
我们已经将我们的实用程序类提取到下面的btn类中:
<style>
@tailwind base;
@tailwind components;
/* grouping similar custom utility classes */
@layer components {
.btn {
@apply px-4 py-2 font-bold text-white rounded;
}
}
@tailwind utilities;
</style>
在将实用程序类分组到类中之后,我们现在对实用程序类具有适当的抽象btn级别。
注意:为避免特异性问题,您可以使用@layercomponents 指令通知 Tailwind 您的自定义组件样式所在的层。@layer允许您通过自动将样式转移到等效@tailwind指令来控制声明顺序,它还允许您使用诸如您自己的自定义 CSS 中的修饰符和 tree-shaking。您可以访问本指南以更好地了解该@layer指令。
将 @apply 与每个组件的 CSS 一起使用
像 Svelte 和 Vue 这样的组件框架允许<style>在每个组件文件的一个块中为每个组件设置样式。如果您尝试将@apply全局 CSS 中定义的自定义类添加到这些每个组件<style>块之一,您将遇到错误。
<style>
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.class {
background-color: theme(colors.blue);
border-radius: theme(borderRadius.lg);
box-shadow: theme(boxShadow.xl);
}
}
div {
/* 行不通,因为样式是单独处理的 */
@apply class;
}
</style>
出现该错误是因为 Vue 和 Svelte 等框架独立处理每个<style>块,并针对每个块单独运行 PostCSS 插件链。因此,如果您有 25 个组件,每个组件都有一个<style> 块,Tailwind 将在不知道先前运行的情况下处理样式 25 次。因此,当您尝试@apply使用全局 CSS 中的预定义类时,它会失败,因为 Tailwind 不知道该类存在,因为样式是独立应用的。
这个问题的解决方案是使用插件系统tailwind.config.js来定义您想要@apply在组件中使用的任何自定义样式。
const plugin = require('tailwindcss/plugin')
module.exports = {
// ...
plugins: [
plugin(function ({ addComponents, theme }) {
addComponents({
'.class': {
backgroundColor: theme('colors.blue'),
borderRadius: theme('borderRadius.lg'),
boxShadow: theme('boxShadow.xl'),
}
})
})
]
}
通过这种方式,任何使用此配置文件的 Tailwind 文件都可以访问这些样式。
结论
本文讨论了 Tailwind CSS@apply指令,强调了它的一些功能、用例和操作模式。因为它减少了项目代码库中的重复并允许轻松维护,所以该@apply指令已被证明是使用复杂类的更好替代方法。由于其简单易用,该组件可以应用于更大的实际工作。
我希望这篇文章对你有价值。
编程愉快!