开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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 官方文档

通过以上内容，你应该对 Tailwind CSS 的 @apply 指令和提取组件的纯CSS有了更深入的了解。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Tailwind CSS那些事儿

在项目 css 中引入 tailwind 指令我们在项目的主css入口，引入如下的指令。...在组件中使用 tailwind 类 // 我们在之前的步骤中，已经在其中引入了 tailwind 指令 import "....-- 创建一个可重用组件 --> 前端柒八九关于基于组件的方法的最后一点建议是：避免使用@apply指令： .block { @apply...，我们的代码可能看起来更清晰，但它抛弃了 Tailwind 的关键优势：在为 CSS 类命名时减少心理负担，以及更改样式时不会出现回归问题（因为使用@apply时它们不会在组件内隔离）。...此外，使用它会增加 CSS 包大小。 Tailwind 的创建者在文档中也强调了谨慎使用@apply指令的重要性。

6003 0

快速掌握 Tailwind：最流行的原子化 CSS 框架

tailwind 的基础样式、组件样式、工具样式的。...之后就可以在组件里用 tailwind 提供的 class 了： import '....：类型太长了而且重复多次这种问题可以用 @layer @apply 指令来扩展：前面讲过 @tailwind 是引入不同的样式的，而 @layer 就是在某一层样式做修改和扩充，里面可以用...在 astexplorer.net 可以看到 postcss 的 AST：而 postcss 就是通过 AST 来拿到 @tailwind、@layer、@apply 这些它扩展的指令，分别作相应的处理...tailwind 还有种叫 JIT 的编译方式，这个原理也容易理解，本来是全部引入原子 css 然后过滤掉没有用到的，而 JIT 的话就是根据提取到的 class 来动态引入原子 css，更高效一点。

8103 0

tailwindcss 从0到1

简单的理解 tailwind css 是原 atom css 的升级版，提供更灵活的配置, 更系统的预设样式类, 更完整的配置体系简单例子 [图片上传失败......文件按需引入 // index.css @tailwind base; // 基础预设样式 @tailwind components; // 组件样式 @tailwind utilities; //...prefilght 自定义扩展函数与指令 @tailwind 自定义主题，功能扩展 tailwind.config.js 预设样式类 tailwind css 提供了一套以移动优先的，响应式样式类...reset.css 为原始标签提供初始样式 @layout base{ h1 { @apply text-2xl; // 指令 @apply 类似scss @include 收集已定义的样式类... 组件类与功能类的主要区别在于职能应用场景的不同，组件注重样式的集合和封装, 功能注重某一点只能的样式复用函数与指令 @tailwind 用于引入样式类 base 基础样式类

1.6K2 0

高效 UI 组件，节省开发时间 | 开源专题 No.70

可以自由地进行混搭与重复使用：所有 Charka UI 的元素都是在 React 基础上开发出来，在保证功能完整性同时也保留了足够多可以修改与调整空间。...CSS、Tailwind CSS 和 Twind 的启发，解决了定制化、速度和体积的问题。...+brotli：零依赖且浏览器友好快捷方式：别名实用程序动态别名化属性模式：在属性中组合实用程序纯 CSS 图标：使用任何图标作为单个类变体组：具有常见前缀的群组工具的速记法 CSS 指令：...使用 @apply 指令在 CSS 中重复使用工具 chokcoco/iCSShttps://github.com/chokcoco/iCSS Stars: 17.1k License: NOASSERTION...该项目的核心优势在于：提供丰富多彩、实用性强的 CSS 奇技淫巧分享现代 CSS 解决方案与高阶技巧深入探讨并呈现关于 CSS 的新特性和使用方法 EmergeTools/Powhttps://github.com

1391 0

分享 6 个你需要使用 Tailwind CSS 的原因

4、组件化的方法提高可重用性在使用Tailwind CSS时，您可能会发现自己不断地应用一组类。为了避免代码重复，Tailwind CSS允许您使用@apply指令创建自定义样式类。...以下是一个示例： .card { @apply rounded bg-gray-300 p-4; } 现在，您可以将.card类直接应用于需要指定样式的任何元素上。...这种基于组件的方法提高了代码的可重用性和可维护性，特别是在使用React或Vue等框架时。...通过调整这些设置，您可以创建一个定制化的设计系统，与您项目的品牌和样式指南完美契合。...它的内联样式和组件化的方法使得开发更加简单、快速和可维护。同时，Tailwind CSS的定制能力和清除未使用样式的功能进一步增强了其实用性和生产效率。

4484 0

定制一个 Vue 3 模板 - 集成 Vite, Pinia, Vue Router 与 Tailwind CSS

技术栈这个后台模板中，用到了如下的框架或库： Vite Pinia Vue Router Tailwind CSS Vite SVG loader 前提开始之前，首先要安装 Node.js，这个自行百度解决...按照这个指南，我们安装Tailwind CSS，然后初始化配置文件。.../src/assets 文件夹中创建tailwind.css，其中包含以下内容(指令): @tailwind base; @tailwind components; @tailwind utilities.../tailwind.css"; 由于我们已经在 /src/main.js 中导入了 /src/assets/main.css 文件，所以，现在就可以在项目中使用 Tailwind 的实用类了。...幸运的是，有这样一个 vit-svg-loader 包，它基本上可以让我们在Vue模板中简单地导入 .svg 文件作为组件。

2.2K1 0

上手体验TailwindCSS

PostCSS Language Support支持css未知规则如tailwind中的 @tailwind、@apply、@screen。...核心概念功能类优先在一组受约束的原始功能类的基础上构建复杂的组件。使用Tailwind内置的功能类来实现下图的卡片样式：实现基础元素准备： <!...；与传统内联样式相比的优势：实现的 UI 全部基于一套预定义功能类实现，UI 更加一致；使用内置的功能类可以轻松实现内联样式无法实现的响应式布局和元素状态等。...提高可维护性的办法：从上面的例子可以看出，使用 Tailwind 后代码的风格趋于内联样式的编写，也带来的阅读的烦恼，解决这样的问题提供了下面两个常用的方法：抽取相同、类似的布局为公共组件、模板，...提高复用性；对于没有必要或不应该提取为组件的简单元素，可以使用@apply抽象CSS类，就跟我们以前编写 class 一样来组合 Tailwind 功能类；响应式设计下面的两张设计图是在不同浏览器尺寸的下分别应该显示的样式

2.3K2 0

从自身开发体验谈谈Tailwind CSS

当我们想写一个css样式时，我们不再需要给标签一个语义化类名，然后再给类名添加CSS规则，我们只需要给标签一个框架提供的类名就行，最后在编译过程中，会自动生成对应CSS规则，这就是原子类CSS，以及它和我们常用语义化标签的不同...有点像我们在使用UI框架的时候，比如我们需要实现一个面包屑，我们需要在对应UI框架里面找到面包屑的代码然后复制，不同的是，TailWind CSS寻找类名的过程更加麻烦，而且往往一个小小的组件需要使用的类名都是几十个上百个...好在TailWind CSS提供了@layer指令，将任何现有的类名内联到自己的自定义CSS中。这点有点像css的mixin（混入）。...提供了UI框架以及基础组件 TailWind CSS虽然是一个css框架，他也有一个UI框架tailwindui，不过目前还是收费的。也提供了一些免费的常用组件。...总结移动端h5的话，像自己公司是没有依赖任何第三方库的，自己写一些基本的组件也比较简单，没有需要使用TailWind CSS的必要。

1921 0

时机已到! 原子化接替语义化声明，TailwindCSS使用指南

在前后端未分离的时代，我们经常提及的是 MVC 架构。然而，在纯前端领域，HTML、CSS 和 JavaScript 也可以被看作是一种类似的分层结构，它们构成了结构层、样式层和交互层。...图片正因为如此，TailwindCSS是需要编译的： Tailwind CSS定义了大量实用类，但不会直接写入其样式规则定义。这些实用类对应的实际CSS规则需要动态生成。...样式；支持暗色模式，以及更多的色彩和自定义；不再支持IE浏览器其实最重要的是支持@apply来构建自己的CSS样式： // 语义化创建一个Button样式 .btn { @apply bg-indigo...比如：Vue2阶段很火的Element UI，目前我认为Element Plus还没发展到像2.0时候那样好用。...相比语义化CSS,原子化CSS类名方式更具扩展性,是未来CSS编写的发展趋势。本文系统概述了从语义化到原子化的演进,以及如何上手使用Tailwind CSS。

2.8K0 0

tailwindcss书写前端样式

公司开发了自己的组件库，组件的样式基于tailwindcss进行开发，所以近期项目重构时，技术组长要求使用tailwindcss，说实话一开始我是排斥的，心想着tailwindcss最后不也是解析成css...如果框架本身不支持修改，你通过自己的写法去修改框架本身的特性，这是一种很脏的写法。非常别扭。但是这个问题在 Tailwind CSS 完全不存在。...Tailwind CSS 没有自以为是的封装任何样式给你。不需要在写 css。使用 Tailwind CSS，基本可以不用再写 css。所有的效果都可以通过 class 名来完成。...响应式设计 Tailwind CSS 遵循移动优先的设计模式。断点系统很灵活。也是目前所有 css 框架里做的最好的。比如你要实现一个媒体查询，根据不同的屏幕宽度实现不同的图片宽度。...一套专业的 UI 属性值 Tailwind CSS 虽然没有封装任何 UI，但是他默认提供的一些属性值都是很专业的。

3792 0

解锁网页设计新境界：一文掌握Tailwind CSS

与传统的CSS框架（如Bootstrap或Foundation）不同，Tailwind不提供预设计的组件，而是提供原子化的、可复用的工具类，使得你可以按照自己的设计轻松地创建界面，而不必覆盖大量预设样式...搭建过程（使用Tailwind CSS）选择积木：开始设计页面时，你首先要做的是从积木盒中挑选合适的积木。...然后，它将生成一个 CSS 文件，其中只包含这些类名对应的样式。这个过程称为“提取”（purging），有助于减少最终生成的 CSS 文件的大小，因为它消除了未使用的样式。...utilities; 这样在样式一直的组件上就能快速复用了。...这种模式在复杂项目中尤其有用，可以帮助你保持构建和服务脚本的清晰度。官方文档当你初次踏入Tailwind CSS的世界时，感觉就像是进入了一个充满了色彩和可能性的迷宫。

6771 0

即时按需原子 CSS 引擎：比 Tailwind JIT 快 5 倍！ | 开源日报 No.149

CSS 引擎，受到 Windi CSS、Tailwind CSS 和 Twind 的启发，解决了定制化、速度和体积的问题。...以下是该项目的特点和核心优势：完全可定制：通过预设提供所有功能，没有核心实用程序无解析、无 AST、无扫描，即时性能（比 Windi CSS 或 Tailwind JIT 快 5 倍） ~6kb min...+brotli：零依赖且浏览器友好快捷方式：别名实用程序动态别名化属性模式：在属性中组合实用程序纯 CSS 图标：使用任何图标作为单个类变体组：具有常见前缀的群组工具的速记法 CSS 指令：...使用 @apply 指令在 CSS 中重复使用工具 apple/ml-ferrethttps://github.com/apple/ml-ferret Stars: 6.0k License: NOASSERTION...该项目的关键优势和核心特点包括： FERRET 模型采用混合区域表示+空间感知视觉采样器，实现了细粒度且开放词汇表范围内的指称与定位。

3091 0

Tailwind CSS 真有那么好吗？讨厌它的前六大原因

免费体验 Gpt4 plus 与 AI作图神器，我们出的钱体验地址：体验 Tailwind CSS 是一个受欢迎的“实用优先”的 CSS 框架，声称可以帮助你更快、更轻松地创建自定义设计。...然而，并不是每个人都对 Tailwind CSS 感到满意。事实上，有很多原因让你应该避免使用它，而坚持使用纯 CSS 或其他框架。...然而，Tailwind CSS 违反了这一原则，将表现与结构混合在一起。而不是使用反映你的元素的目的和功能的有意义和描述性的类名，Tailwind CSS 使用的是描述它们外观的通用和难懂的类名。...例如，以下是 Tailwind CSS 中的一个简单卡片组件的样子：纯 CSS 比 Tailwind CSS 更简洁和语义化。

1.7K1 0

解锁全栈能力：java程序员的全栈自我革新与ChatGPT的智能协助

保持前后端分离的设计理念，有助于提高应用的可维护性和可扩展性。组件化开发：利用UIkit的组件和Tailwind CSS的实用工具类来构建可复用的UI组件。...适用场景：适合那些需要构建中大型单页应用（SPA）的项目，特别是当需要复杂的组件交互和状态管理时。...使用Alpine.js实现前端逻辑数据绑定：利用Alpine.js的x-data和x-bind等指令进行数据绑定，实现数据与UI的同步更新。...事件处理：使用x-on指令监听DOM事件（如点击、输入等），并执行相应的JavaScript函数。条件渲染和循环：使用x-show、x-if和x-for指令根据数据动态渲染UI组件或列表。 3....Tailwind CSS实用工具类：利用Tailwind CSS的实用工具类来定制和调整组件的边距、颜色、字体大小等样式，以适应设计需求。

1661 0

Vue3引入tailwindcss

Tailwind CSS 是一个为快速创建定制化 UI 组件而设计的实用型框架。与其他 CSS 框架或库不同，Tailwind CSS 组件没有预先设置好样式。...可以使用 Tailwind 的低级实用类来为 CSS 元素设置样式，如 margin、flex、color 等。...自从 2017 年发布以来，Tailwind CSS 越来越受欢迎，因为它允许开发者创建独特的 UI，而不被 UI kit 规则所束缚。.../src/index.css 文件并使用 @tailwind 指令来包含 Tailwind的 base、 components 和 utilities 样式，来替换掉原来的文件内容。/* ..../src/index.css */@tailwind base;@tailwind components;@tailwind utilities;确保CSS 文件被导入到您的 .

5871 0

让你开发更舒适的 Tailwind 技巧

免费体验 Gpt4 plus 与 AI作图神器，我们出的钱体验地址：体验使用 Tailwind CSS，我避免了在 React 项目中复制大量 CSS 文件的麻烦，使网页开发变得更加迅速高效。...CSS，例如我们自己的值而不是预定义的值。...这是否会使您的包大小增加，因为定义任何任意值时 Tailwind 会创建一个附加类？..."; export const clsxm = (...classes: ClassValue[]) => twMerge(clsx(...classes)); 这里，它接受任何数量的类并将它们与 tailwind-merge...这是因为它没有被训练去做这件事 —— 它只在我们编写类名和使用 @apply 样式时触发。

4672 1

Tailwind CSS：最受欢迎的实用类CSS框架!Github Star达到了惊人的82.5K!

与 Bootstrap 等框架提供一系列预定义组件不同，Tailwind 提供的是一组高度可定制的实用类，通过组合这些类，开发者能够自由设计出他们需要的界面，而不必依赖于预先设计好的 UI 元素。...utilities;修改配置文件将 Tailwind 指令添加到 CSS 中直接使用样式 Hello world...其内置的实用类和响应式设计让你无需编写复杂的 CSS，自然加快了开发速度。灵活定制 UI对于那些不希望局限于预定义组件的项目，Tailwind 提供了极高的灵活性。...与现代框架集成无论你使用的是 Vue、React 还是 Next.js 等现代前端框架，Tailwind 都能无缝集成，让样式管理变得更加高效和模块化。为什么选择 Tailwind CSS？...与传统 CSS 框架相比，Tailwind 不提供组件化的限制，开发者可以随心所欲地设计布局，创造出独一无二的界面风格。

1051 0

Tailwind CSS，值得2024年的你一试吗？

高度定制化: 与传统框架不同，Tailwind CSS没有预设的UI组件，这意味着更高的定制化能力，可以根据项目需求灵活调整样式。...与Bootstrap对比: 与Bootstrap这样旨在提供一致外观和感觉的框架相比，Tailwind CSS更注重于提供更多的自由度和创造性。...集成前端框架 React: Tailwind CSS与React的集成使得在构建动态用户界面时可以轻松应用样式。这对于React应用来说是一个巨大的优势，因为它可以提高开发效率并保持代码的简洁性。...与PurgeCSS的集成: 通过与PurgeCSS的集成，帮助移除未使用的CSS，使得构建更经济、更迅速。...甚至在鼠标悬停时，它们还可以调整以满足可访问性的要求：通过高知名度网站和实际案例的观察，可以明显看出Tailwind CSS不仅仅是一时的流行趋势，而是一个强大而灵活的工具，适合于现代的Web开发需求

5521 0

开源 UI 设计：灵活定制新趋势 | 开源专题 No.86

包含 Google's Material Design 系统的组件库提供 Joy UI 和 Base UI 两个美观设计的 React UI 组件库 MUI System 是一套 CSS 实用工具集，...提供直观、交互式且高度可定制的图表纯 JavaScript 编写，基于轻量级画布库 zrender 支持各种类型的图表展示可以通过 npm 安装或 CDN 获取提供详细文档和示例代码 jgthms...saadeghi/daisyuihttps://github.com/saadeghi/daisyui Stars: 31.3k License: MIT daisyUI 是 Tailwind CSS...的最受欢迎、免费且开源的组件库，主要功能包括提供各种组件和工具来简化使用 Tailwind CSS 进行网页设计。...其核心优势和关键特性包括：提供大量可定制的 UI 组件简化了基于 Tailwind CSS 进行网页设计的流程支持快速安装和集成到项目中

1111 0

一文搞懂css、scss、tailwindcss区别

SCSS 使用与 CSS 类似的语法，但它更灵活和易于维护，允许你编写更复杂的样式规则。「可重用性:」 CSS: CSS 在样式的重用性方面相对较弱。...SCSS: SCSS 允许你使用嵌套规则，将子元素的样式嵌套在父元素内，使样式表的结构更加清晰。「维护性:」 CSS: 随着项目的增长，纯 CSS 可能会变得难以维护，因为它缺乏模块化和结构性。...手动编写样式：使用 SCSS 需要手动编写 CSS 规则，即你需要明确地编写每个元素的样式规则和选择器。独立性： SCSS 是一种独立的 CSS 预处理器，可以与任何前端框架或库一起使用。...「Tailwind CSS:」 Utility-First CSS： Tailwind CSS 是一种"实用优先"的 CSS 框架，提供了一组预定义的 CSS 类，用于构建页面组件和样式。...集成性： Tailwind CSS 通常与现代前端框架（如 Vue.js、React 等）良好集成，并有许多相关的插件和工具来帮助更好地集成到这些框架中。

1.6K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭