TailwindCss Functions Directives

一般都写在一个 css 文件。

Directives

  • @tailwind
  • @layer
  • @apply
  • @config 【一般放在最后面,@import 导入其他 css 文件后】
@tailwind base;
@tailwind components;
@tailwind utilities;@layer base {h1 {@apply text-2xl;}h2 {@apply text-xl;}
}@layer components {.btn-blue {@apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;}
}@layer utilities {.filter-none {filter: none;}.filter-grayscale {filter: grayscale(100%);}
}

Functions

  • theme():使用 theme() 函数使用点表示法访问Tailwind配置值。
  • screen():允许创建媒体查询
.content-area {height: calc(100vh - theme(spacing.12));/* 或者 */height: calc(100vh - theme(spacing[2.5]));/* 或者 */background-color: theme(colors.blue.500);/* 或者 */background-color: theme(colors.blue.500 / 75%);
}
/* 等同于 min-width: 640px */
@media screen(sm) {/* ... */
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/102571.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

实际开发中常用的Git操作

文章目录 前言基础知识集中式版本控制 - SVN分布式版本控制 - Git常用的Linux命令Git工作区域 Git 常用命令获取Git仓库添加/提交/推送/删除/回退文件查看信息Git分支Git标签Gitk:一个排查Git问题的工具 前言 git是用C语言开发的,以追求最高的性能。git…

c++中单例模式的实现和问题

单例模式定义 单例模式是一种创建型设计模式,它确保一个类只有一个实例,并提供了一个全局访问点来访问该实例。这种模式涉及到一个单一的类,该类负责创建自己的对象,同时确保只有单个对象被创建。这个类提供了一种访问其唯一的对…

mysql面试题44:MySQL数据库cpu飙升的话,要怎么处理?

该文章专注于面试,面试只要回答关键点即可,不需要对框架有非常深入的回答,如果你想应付面试,是足够了,抓住关键点 面试官:MySQL数据库cpu飙升的话,要怎么处理呢? 当MySQL数据库的CPU使用率飙升时,可能表示数据库负载过重或存在性能问题。以下是处理MySQL数据库CPU飙…

TongWeb8的启、停功能场景说明

前言: TongWeb8除了正常的startserver.sh、stopserver.sh启停功能外,还有开机自启、宕机重启、定时重启、内存溢出重启、禁止非法退出等功能,以适应不同场景,保证应用系统的可靠性。 场景一:开机自启 前提条件&#…

Linux友人帐之网络配置与网络传输

一、相关概念 IP地址 IP地址(Internet Protocol Address)是用于唯一标识和定位计算机网络中设备(如计算机、服务器、路由器等)的数字标识。在互联网中,IP地址是用来进行网络通信和数据传输的基础。 IP地址由32位或128…

在Red Hat 8环境下安装Gradle

文章目录 小结问题解决参考 小结 在Red Hat 8安装Gradle,并解决了Gradle编译的时候找不到tools.jar的问题。 问题 需要在在Red Hat 8安装Gradle,并在Gradle编译的时候碰到找不到tools.jar的问题, 如下: Gradle does not find t…

kotlin实现ArrayDeque

Deque双端队列,一直在使用,却从未了解过源码。 内部逻辑其实很简单 可扩容数组循环队列,循环栈扩容倍数1.5,sizesize(size shr 1)只从两端存取元素 fun main() {val deque MyArrayDeque()repeat(16) {deque.addLast(it)}while …

Kotlin函数作为参数指向不同逻辑

Kotlin函数作为参数指向不同逻辑 fun sum(): (Int, Int) -> Int {return { a, b -> (a b) } }fun multiplication(): (Int, Int) -> Int {return { a, b -> (a * b) } }fun main(args: Array<String>) {var math: (Int, Int) -> Intmath sum()println(m…

vuex常用属性

以下是Vuex常用属性&#xff1a; state&#xff1a;存储应用程序状态的数据 getters&#xff1a;获取应用程序状态的计算属性 mutations&#xff1a;修改应用程序状态的同步方法 actions&#xff1a;修改应用程序状态的异步方法 modules&#xff1a;将应用程序状态分为模块…

正点原子嵌入式linux驱动开发——Linux内核顶层Makefile详解

之前的几篇学习笔记重点讲解了如何移植uboot到STM32MP157开发板上&#xff0c;从本章就开始学习如何移植Linux内核。 同uboot一样&#xff0c;在具体移植之前&#xff0c;先来学习一下Linux内核的顶层Makefile文件&#xff0c;因为顶层 Makefile控制着Linux内核的编译流程。 L…

JRebel在IDEA中实现热部署 (JRebel实用版)

JRebel简介&#xff1a; JRebel是与应用程序服务器集成的JVM Java代理&#xff0c;可使用现有的类加载器重新加载类。只有更改的类会重新编译并立即重新加载到正在运行的应用程序中&#xff0c;JRebel特别不依赖任何IDE或开发工具&#xff08;除编译器外&#xff09;。但是&…

CF1877A Goals of Victory

题目是说&#xff0c;有n个队伍进行足球赛&#xff0c;两两之间进行一场足球赛&#xff0c;会有一个积分&#xff0c;a:b&#xff0c;题目所说的efficiency表示的是一个队伍的得分减去对手队伍的得分 #include<bits/stdc.h> using namespace std;int num[110];int main(…

jvm--对象实例化及直接内存

文章目录 1. 创建对象2. 对象内存布局3. 对象的访问定位4. 直接内存&#xff08;Direct Memory&#xff09; 1. 创建对象 创建对象的方式&#xff1a; new最常见的方式、Xxx 的静态方法&#xff08;单例模式&#xff09;&#xff0c;XxxBuilder/XxxFactory 的静态方法Class 的…

Unity基础课程之物理引擎6-关于物理材质的使用和理解

每个物体都有着不同的摩擦力。光滑的冰面摩擦力很小&#xff0c;而地毯表面的摩擦力则很大。另外每种材料也有着不同的弹性&#xff0c;橡皮表面的弹性大&#xff0c;硬质地面的弹性小。在Unity中这些现象都符合日常的理念。虽然从原理上讲&#xff0c;物体的摩擦力和弹性有着更…

2023全国大学生软件测试大赛开发者测试练习题99分答案(ScapegoatTree2023)

2023全国大学生软件测试大赛开发者测试练习题99分答案(ScapegoatTree2023) 题目详情题解代码(直接全部复制到test类中即可)提示:该题只需要分支覆盖得分即可,不需要变异得分 题目详情 题解代码(直接全部复制到test类中即可) package net.mooctest;import static org.…

数据结构—顺序表

目录 1.线性表 2.顺序表概念 3.实现顺序表 (1)声明结构体 (2)初始化 (3)打印数据 (4) 销毁 (5)尾插&头插 尾插 判断是否扩容 头插 (6)尾删&头删 尾删 头删 (7)指定位置插入元素 (8)删除指定位置元素 (9)查找指定元素位置 (10)修改指定位置元素 完整版…

RustDay03——记录刷完Rust100题

刷了两三天Rust&#xff0c;终于把Rust100题刷完了&#xff0c;小小记录一下 明天白天的时候重开账户开题写答案

gpio内部结构(一)

一&#xff0c;GPIO内部结构 1&#xff0c;保护二极管 * 引脚内部加上这两个保护二级管可以防止引脚外部过高或过低的电压输入。 * 当引脚电压高于 VDD_FT 或 VDD 时&#xff0c;上方的二极管导通吸收这个高电压。 * 当引脚电压低于 VSS 时&#xff0c;下方的二极管导通&…

如何在edge浏览器中给PDF添加文字批注

我用的edge浏览器是目前最新版的&#xff08;一般自动更新到最新版&#xff09; 最近&#xff0c;我喜欢用edge浏览器查看PDF&#xff0c;节省电脑资源&#xff0c;快捷且方便。 但edge对PDF的标注种类较少&#xff0c;主要是划线和涂色&#xff0c;文字批注功能尚未出现在工具…

掌握 BERT:自然语言处理 (NLP) 从初级到高级的综合指南(2)

BERT的先进技术 当您精通 BERT 后&#xff0c;就该探索先进技术以最大限度地发挥其潜力。在本章中&#xff0c;我们将深入研究微调、处理词汇外单词、领域适应&#xff0c;甚至从 BERT 中提取知识的策略。 微调策略&#xff1a;掌握适应 微调 BERT 需要仔细考虑。您不仅可以微调…