使用@apply简化Tailwind CSS类

发表时间: 2022-12-29 12:02

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指令已被证明是使用复杂类的更好替代方法。由于其简单易用，该组件可以应用于更大的实际工作。

我希望这篇文章对你有价值。

编程愉快！

使用@apply简化Tailwind CSS类

如何将 Tailwind CSS 安装到您的项目中

开始使用 Tailwind CSS @apply

如何在下一个项目中使用@apply 指令

将 @apply 与每个组件的 CSS 一起使用

结论

热门阅读

推荐阅读