tailwindcss的@apply使用

最新推荐文章于 2024-08-08 14:27:26 发布

前端小鸡

最新推荐文章于 2024-08-08 14:27:26 发布

阅读量475

点赞数 1

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_53164768/article/details/139533114

版权

tailwindcss的@apply是把在html写的tailwindcss可以挪到style里面

简化页面的可读性

没写之前的

 <section class="block-risk absolute flex flex-col items-center p-4 text-center left-0 text-white;" :style="{ top, left: '60px' }">
</section>

使用@apply之后的

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端小鸡

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
tailwindcss的@apply使用

tailwindcss的@apply是把在html写的tailwindcss可以挪到style里面。
复制链接

扫一扫

tailwindcss 官网（五）核心概念：添加新的功能类、函数与指令（@tailwind、@apply、!important、@layer、@variants、 theme()）、px、em、rem

qq_43456781的博客

09-13

4298

tailwindcss 官网（五）核心概念：添加新的功能类、函数与指令（@tailwind、@apply、!important、@layer、@variants、@responsive、 theme()、 @screen）、px、em、rem 文章目录tailwindcss 官网（五）核心概念：添加新的功能类、函数与指令（@tailwind、@apply、!important、@layer、@variants、@responsive、 theme()、 @screen）、px、em、rem1. 添加新的功

Tailwind CSS 入门和实践

quanxiangcloud的博客

11-08

8513

背景 Tailwind 是一个基于 Atomic/Utility-First 规范 CSS 框架，提供了基础的工具类 utility classes（如：内边距 padding、字体 text 和 font、动画 transition 等预设类），能直接在脚本标记语言中组合起来，构建出您想要的设计。

参与评论您还未登录，请先登录后发表或查看评论

Windi CSS 使用@apply实现样式抽离

weixin_46006713的博客

03-23

1490

两段代码得到的结果是相同的，但是使用 @apply 可以让代码更加简洁、易于维护和扩展。使用 @apply 技术，我们可以将样式的定义和使用分离开来，在样式定义处进行修改和扩展，而不需要修改每个使用该样式的类。这样可以有效地避免代码重复和冗长，提高代码的可读性和可维护性。

TailwindCSS的使用，看这一篇就够了！

我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。

03-30

1913

更好的阅读体验请移步至：zhengxiaoping.xyz/css/Tailwin…[1]安装以下方法是Vite + Vue模式下的安装方法，其他脚手架与框架的使用同理。创建项目pnpmcreateviteapp--templatevue #yarncreateviteapp--templatevue #npmcreateviteapp--templatevue ...

[Tailwind] Apply mobile-first Responsive Classes in Tailwind

weixin_34396902的博客

04-10

123

In this lesson, we take a look at tailwind's mobile-first CSS architecture and learn how to apply styles to specific media queries only. We also discover a couple of ways we can define custom media qu...

tailwindcss @apply 和 @layer 有什么区别

最新发布

前端原创分享，常年坚持记录和分享，全网阅读量超百万

08-08

510

apply用于将 Tailwind 的工具类应用到自定义的 CSS 类中，简化和复用样式。@layer用于将自定义样式归类到 Tailwind 的特定层中，确保样式的声明顺序和组织性。通过结合使用这两个指令，你可以在 Tailwind CSS 项目中更高效地管理和复用样式。

css 自定义属性（@apply var）

u010688943的博客

07-08

4557

突然有一天，发现了新大陆，css还可以这么的写，预编译的道路更加的宽泛了，连w3c的标准制定协会都和sass、less 争夺了。我个人是这么的理解：首先现在预编译很多，我们裁判为什么会出来横插一脚，又另弄一套，功能还没有我们众所周知的sass和less强大<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

TailwindCss实战总结

qq_40147756的博客

07-25

1247

tailwindcss 的实战总结

svelte-tailwind:使用TailwindCSS在Svelter中构建Web应用程序的基本模板

05-29

带有 TailwindCSS 模板的 Svelte :ewe: 获取模板或项目根据您的喜好选择复制还是分叉。 :clipboard: 复制 npx degit erianvc/svelte-tailwind my-app :fork_and_knife: 叉单击此项目的 GitHub 页面上的Use this...

浏览器中的Tailwind CSS JIT-JavaScript开发

05-26

通过在HTML中包含一个脚本标签，充分利用Tailwind CSS的新JIT编译器的功能。 Tailwind JIT CDN通过在HTML中包含一个脚本标签来充分利用Tailwind CSS的新JIT编译器的功能。用法：只需将此脚本标记包括在您的站点中：

tailwindcss 官网（三）核心概念：功能类优先、响应式设计（UI、断点）

qq_43456781的博客

09-12

1704

tailwindcss 官网（三）核心概念：功能类优先、响应式设计（UI、断点）文章目录tailwindcss 官网（三）核心概念：功能类优先、响应式设计（UI、断点）1. 功能类优先概述为什么不使用内联样式？可维护性问题2. 响应式设计概述移动优先定位手机屏幕定位单个断点自定义断点官网：安装 - Tailwind CSS 中文文档 1. 功能类优先在一组受约束的原始功能类的基础上构建复杂的组件。概述传统情况下，当您需要在网页上设置样式时，都需要编写 CSS。使用传统方式时，定制的设计需要定

用tailwindcss的思想+scss手撸公有样式

MyWay

10-10

1696

前言在了解了cssinjs之后，我对css框架的发展不由得产生了一些兴趣。浏览之下找到了tailwindcss，这设计非常惊艳，虽然咋一看非常非常丑陋，但是对于已经熟记规则的开发者，再借助vscode插件，带来的开发体验非常之棒而稍加尝试之后，我想试着把tailwindcss引入到我现有的项目中，但是引入过程中，我发现对于一些微型项目，引入tailwindcss似乎不太划得来，尤其是我之前也喜欢写公有类以至于出现了css污染（撞得美满），已有的设计规范和微型项目不值得专门引入tailwindcss，

React 在 styled-components 中使用 TailwindCss

未将对象引用设置到对象的实例

04-21

1841

编译 Styled-Components 中的 @apply 将 tailwind 编译为普通css支持 windi 与 tailwindVite : https://github.com/JiangWeixian/vite-plugin-styled-windicssBabel : https://github.com/JiangWeixian/babel-plugin-styled-windicss官方 VsCode插件中设置 (配置的灵感来源于tailwind-styled-components)

Tailwind CSS 分享

u011352988的博客

11-07

396

Tailwind CSS 简单入门。

使用Tailwind CSS 如何解决Unknown at rule @applyscss(unknownAtRules)警告？

u013023765的博客

07-29

7364

VSCode 解决方案：在工作区设置文件中 settings.json 加载 Tailwind 指令的自定义 CSS 数据集。答案来源：https://duncanleung.com/tailwind-css-unknown-at-rule/

解决Windcss样式出现‘Unknown at rule @apply’警告

njkl2166的博客

12-15

1605

添加1. 新建文件.vscode/tailwindcss.json。2.新建文件.vscode/settings.json。3. 关闭vscode编辑器，重新打开。

Tailwind CSS入门（二）——基本介绍和特性

immocha的博客

04-25

1131

上一篇文章简要的介绍了原子类CSS，以及个人对语义化、原子化的一些经验和理解。从这篇文章开始，正式开始分享Tailwind CSS的特性、使用和技巧。Tailwind CSS是一个为快速开发而精心设计的原子类CSS框架，在此我们将搭建一个Vite项目来配合讲解这个的系列课程，需要你掌握一些CSS、Vue的知识。作为一个原子类CSS框架，如果你熟练掌握CSS，那么使用起来将会非常顺手。

@apply在scss

10-20

@apply是Sass中的一个指令，它可以将一个CSS规则集应用于另一个规则集。这个指令可以让你在不重复编写样式的情况下，将一个规则集的样式应用到另一个规则集中。使用@apply指令可以使代码更加简洁，易于维护。下面是一个@apply的例子： ``` // 定义一个样式规则集 @mixin button { display: inline-block; padding: 10px 20px; font-size: 16px; color: #fff; background-color: #007bff; border-radius: 4px; border: none; } // 使用@apply指令将button样式应用到.button类中 .button { @apply button; } ``` 在上面的例子中，我们定义了一个名为button的样式规则集，它包含了一些按钮的基本样式。然后，我们使用@apply指令将这个规则集应用到.button类中，这样.button类就拥有了button规则集中定义的所有样式。