Tailwind @apply指令与提取组件时的纯CSS
Tailwind CSS @apply 指令与提取组件的纯CSS
基础概念
Tailwind CSS 是一个功能丰富的 CSS 框架，它提供了一系列的实用类（utility classes），可以直接在 HTML 中使用，以快速构建响应式设计。@apply 指令允许你在 Tailwind CSS 中将一组实用类应用到一个自定义的 CSS 类中，这样可以提高代码的可重用性和可维护性。
相关优势
- 代码复用：通过
@apply指令，可以将常用的实用类组合成一个自定义类，减少重复代码。 - 可读性：自定义类名通常更具描述性，使得代码更易于理解和维护。
- 灵活性：当 Tailwind CSS 更新或添加新的实用类时，已经定义的自定义类可以无缝地利用这些更新。
类型
- 内联样式：直接在 HTML 元素上使用
class属性。 - 外部样式表：在单独的 CSS 文件中定义样式，并在 HTML 中通过
<link>标签引入。
应用场景
假设你有一个按钮组件，它需要一些特定的样式，如背景颜色、字体大小和边距。你可以使用 @apply 指令将这些样式组合成一个自定义类：
/* styles.css */
.btn-custom {
@apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}然后在 HTML 中使用这个自定义类：
<button class="btn-custom">Click me</button>遇到的问题及解决方法
问题：在使用 @apply 指令时，可能会遇到 Tailwind CSS 版本不兼容的问题，导致某些实用类无法正确应用。
原因：Tailwind CSS 的不同版本可能会有不同的实用类定义，旧版本的实用类在新版本中可能已被移除或修改。
解决方法：
- 检查版本：确保你使用的 Tailwind CSS 版本与你的项目配置一致。
- 更新依赖：如果需要，更新 Tailwind CSS 到最新版本，并相应地调整你的自定义类。
- 查看文档：参考 Tailwind CSS 官方文档，了解最新的实用类定义和使用方法。
示例代码
以下是一个完整的示例，展示了如何使用 @apply 指令和提取组件的纯CSS：
/* styles.css */
.btn-custom {
@apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}
.modal-overlay {
@apply fixed inset-0 flex items-center justify-center bg-gray-900 opacity-50 transition-opacity;
}
.modal-content {
@apply bg-white rounded-lg p-4 shadow-lg;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modal Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="modal-overlay">
<div class="modal-content">
<button class="btn-custom">Close</button>
</div>
</div>
</body>
</html>参考链接
通过以上内容，你应该对 Tailwind CSS 的 @apply 指令和提取组件的纯CSS有了更深入的了解。
相关·内容
如果这属于某些固执己见的问题，我很抱歉，但我正在尝试确定我是否遗漏了什么，或者这只是另一种方式。 我们目前有自己的CSS样式，用于使用SASS的常用元素。例如，对于一个按钮，我们有一个基本的"btn“类，并且可以使用SASS "&-blue”将不同的变体应用到btn-blue样式上，等等。总体来说，这很好用，但问题(以及为什么我们使用顺风)是你不能解释类中的每一个单独的东西，并且我们的许多UI是特定于<em
浏览 47提问于2020-05-03得票数 1
我正在学习Tailwind，我不禁注意到它是多么肮脏，因为html可以变成一个元素中不同类组合的巨大汤，我基本上必须对我基本上编写的每个公共元素重复它们。我可能做错了，所以请纠正我。我想知道是否有一种方法可以将css类放在css声明中，可能使用css处理器？你们推荐在元素中管理long Tailwind类组合的好方法是什么？
浏览 1提问于2021-03-20得票数 0
我想在我的Gridsome项目中使用顺风应用功能。但是抛出错误，找不到来自顺风的css类。重现步骤：2)安装顺风插件 import "~/assets/style.css"5)在带有顺风组件的css中使用@apply
什么都没发生。
浏览 5提问于2019-08-01得票数 2
我正在尝试访问组件中的Tailwind类。我完全可以通过模板访问它。问题是当我试图访问标记中的类时。<style lang="scss" scoped> @apply .bg-black</style> .bg-back类不存在。如果.bg-back是一个自定义类，请确保它是在@
浏览 7提问于2021-12-19得票数 1
回答已采纳
我希望使用apply在组件上定义一些css设置，我还希望能够覆盖它，如下所示：问题是，thw @apply指令的设置不能被该行覆盖。如果我在app.post.css文件中输入相同的css指令，或者在@tailwind utilities行之前输入相同的css指令，或者使用@layer components指令</em
浏览 9提问于2021-09-05得票数 9
我使用的是顺风(1.9.6版) 我想使用前缀(如sm和md )与组件，我用@apply在css文件中提取，如下所示。css @tailwind base;@tailwind utilities;
.itemcase {@apply border border-gray300 text-sm font-semib
浏览 12提问于2020-12-07得票数 0
2回答
我试图找出一个很好的工作流程，如何在Next.js中使用Tailwind和CSS，但是我遇到了一些棘手的问题，涉及到Webpack插入样式的顺序和特性。选项1是提取组件，如中提到的在我
浏览 7提问于2021-03-16得票数 12
我在一个项目中使用了角13.1 (带有SASS) + TailwindCss 3.0.7，并发现了一个奇怪的行为。在我的styles.scss中，我使用官方文档中所述的@tailwind指令导入了Tailwind样式，但是当我在一个延迟加载的模块上显示一个组件时，这些样式并没有被应用，我通过在每个组件上自己的样式表上再次导入顺风来修复这个问题有人能解释一下@tailwind和@im
浏览 5提问于2021-12-23得票数 1
回答已采纳
我想为我的UI创建一些自定义样式，并且在官方的Tailwind 中描述了实现它的两个选项。
到目前为止，我理解@apply只是创建了一个自定义样式类，并将其添加到Tailwind系统中。这正是我
浏览 11提问于2022-11-14得票数 1
回答已采纳
2回答
我正在为我公司的下一个中型前端开发挑选技术栈。
我(现在)选择了: Angular，Tailwindcss，PrimeNg和PrimeIcons。现在，我开始适应这些技术，或者用这些技术更新我的知识。一切都进展顺利，除了一件事，我不能用顺风来纠正。PrimeNg的组件有类，如p-inputtext-sm或p-inputtext-lg，我想根据顺风的响应变体来设置这些类。
浏览 12提问于2022-03-21得票数 2
我有一个角度9项目与TailwindCSS安装在它上，并成功地合作。我需要一些PrimeNG库实用程序，我只是在我的Range9+ TailwindCSS项目上安装，但是当我将样式添加到angular.json文件中时，它会覆盖我的TailwindCSS实用程序和样式，但是如果我不添加primeng主题文件，primeng库组件就不会以正确的方式呈现。最后，我所需要的只是用TailwindCSS样式和类呈现我所有的角定制组件，但是只有使用PrimeNG
浏览 3提问于2020-09-08得票数 2
我发现@apply指令是重用代码的一种简单方法，但是当我在顺风css中使用@apply指令时，它显示了错误，您不能在这里@apply btn实用程序，因为它会创建一个循环依赖项。这是我的HTML代码
<a class="bg-transparent border btn border-black hover:bg-black hover:text-whitepx-6 py-2 rounded-2
浏览 4提问于2022-03-29得票数 2
回答已采纳
尝试使用新的React组件(使用)，但是当将_app.tsx重命名为_app.server.tsx时，样式根本不加载(不过，html呈现得很好)。_app.tsx是一个导入带有所有@tailwind指令的全局@tailwind文件的程序。尝试将这个css导入移动到...client.tsx组件，但显然下一个允许它。是否有人成功地让Tailwind与服务器组件协同工
浏览 6提问于2022-05-26得票数 1
2回答
我需要将Tailwind样式应用到DOM的特定部分。</h2> <div class="part2"> </div>例如，我需要将样式应用于应用程序的part1。所以，应用的样式应该如下所示： font-weight: 700;有任何方法来应用像上面的例子那样的样式吗？我在我
浏览 29提问于2022-06-05得票数 0
1回答
如何使顺风可维护
、、、
这是Netflix的网页之一与使用特定名称的类名(.checkbox)相比，使用顺风需要添加大量的类名(例如mr-1、mt-2)。在许多人进行维护之后，类名中的字符串将变得多。
浏览 5提问于2022-07-21得票数 -2
回答已采纳
我在学习尾风CSS。正如我所理解的，如果您想要对元素进行样式化，可以向其添加Tailwind实用程序css类。当我想要设计多个相似的元素时，我应该做些什么？t1"><td class="px-2 text-lg"></td><td></td></table>
如您所见
浏览 2提问于2022-04-22得票数 1
回答已采纳
目标是将组件模块创建为，并将其与主应用程序分离。因此，组件库作为独立的包发布到NPM，然后可以导入到不同的应用程序中。使用Tailwind的@apply实用程序- 编写的组件样式
组件库和主应用程序都使用尾风CSS。当我在同一个主项目中本地使用角库(参见组件“本地演示”的示例)时，它就工作得很好。但是当我将库作为NP
浏览 2提问于2021-09-02得票数 8
我的工作是对打字稿和尾稿作出反应。
我想要的不是在主文件中使用@apply指令(即conatins @ tailwind.css基、@顺风组件等的文件)，而是希望在任何.scss文件中使用它。例如，每当我创建组件时，我都会创建一个文件夹，并在其中创建一个index.tsx文件和一个.scss文件。我想在那个.scss文件中使用@apply指令。这样，它将很容易工作和调试，因为两个相
浏览 3提问于2021-01-01得票数 19
我在Laravel的VueJS组件中使用Tailwind CSS，就像这样。template>
有没有在VueJS组件中使用Laravel Mix的
浏览 39提问于2019-11-14得票数 4
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
