tailwindcss学习03
01 入门
02 vue中接入
03 工具类优先
准备
vue.svg
<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="a">
<stop stop-color="#2397B3" offset="0%"></stop><stop stop-color="#13577E" offset="100%"></stop>
</linearGradient><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="b">
<stop stop-color="#73DFF2" offset="0%"></stop>
<stop stop-color="#47B1EB" offset="100%"></stop></linearGradient></defs>
<g fill="none" fill-rule="evenodd"><path d="M28.872 22.096c.084.622.128 1.258.128 1.904 0 7.732-6.268 14-14 14-2.176 0-4.236-.496-6.073-1.382l-6.022 2.007c-1.564.521-3.051-.966-2.53-2.53l2.007-6.022A13.944 13.944 0 0 1 1 24c0-7.331 5.635-13.346 12.81-13.95A9.967 9.967 0 0 0 13 14c0 5.523 4.477 10 10 10a9.955 9.955 0 0 0 5.872-1.904z" fill="url(#a)" transform="translate(1 1)"></path><path d="M35.618 20.073l2.007 6.022c.521 1.564-.966 3.051-2.53 2.53l-6.022-2.007A13.944 13.944 0 0 1 23 28c-7.732 0-14-6.268-14-14S15.268 0 23 0s14 6.268 14 14c0 2.176-.496 4.236-1.382 6.073z" fill="url(#b)" transform="translate(1 1)"></path><path d="M18 17a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM24 17a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM30 17a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" fill="#FFF"></path></g>
</svg>
传统方式构建聊天组件
<script setup>
</script><template><div class="chat-notification"><div class="chat-notification-logo-wrapper"><img class="chat-notification-logo" src="./assets/vue.svg" alt="ChitChat Logo"></div><div class="chat-notification-content"><h4 class="chat-notification-title">ChitChat</h4><p class="chat-notification-message">You have a new message!</p></div>
</div>
</template><style scoped>.chat-notification {display: flex;align-items: center;max-width: 24rem;margin: 0 auto;padding: 1.5rem;border-radius: 0.5rem;background-color: #fff;box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);}.chat-notification-logo-wrapper {flex-shrink: 0;}.chat-notification-logo {height: 3rem;width: 3rem;}.chat-notification-content {margin-left: 1.5rem;}.chat-notification-title {color: #1a202c;font-size: 1.25rem;line-height: 1.25;}.chat-notification-message {color: #718096;font-size: 1rem;line-height: 1.5;}
</style>


tailwindcss
<script setup>
</script><template>
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center gap-x-4"><div class="shrink-0"><img class="size-12" src="./assets/vue.svg" alt="ChitChat Logo"></div><div><div class="text-xl font-medium text-black">ChitChat</div><p class="text-slate-500">You have a new message!</p></div>
</div>
</template><style scoped>
</style>
带有响应式悬浮效果的个人名片
<script setup>
</script><template>
<div class="py-8 px-8 max-w-sm mx-auto space-y-2 bg-white rounded-xl shadow-lg sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:gap-x-6"><img class="block mx-auto h-24 rounded-full sm:mx-0 sm:shrink-0" src="./assets/erin-lindford.jpg" alt="Woman's Face" /><div class="text-center space-y-2 sm:text-left"><div class="space-y-0.5"><p class="text-lg text-black font-semibold">Erin Lindford</p><p class="text-slate-500 font-medium">Product Engineer</p></div><button class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">Message</button></div>
</div>
</template><style scoped>
</style>
pc端

手机端

上面的css类不太了解没关系,后面会挨个学习,主要是了解一下tailwindcss特性
参考
工具类优先
相关文章:
tailwindcss学习03
01 入门 02 vue中接入 03 工具类优先 准备 vue.svg <svg viewBox"0 0 40 40" xmlns"http://www.w3.org/2000/svg"> <defs> <linearGradient x1"50%" y1"0%" x2"50%" y2"100%" id"a"&…...
QML Component 与 Loader 结合动态加载组件
在实际项目中,有时候我们写好一个组件,但不是立即加载出来,而是触发某些条件后才动态的加载显示出来,当处理完某些操作后,再次将其关闭掉; 这样的需求,可以使用 Component 包裹着组件ÿ…...
Visual studio 2022 将打开文件的方式由单击改为双击
1. 打开vs2022,选择Tools -> Options打开Options设置页面 2. 在左侧依次展开Environment, 选择Tabs and Windows 3. 在右侧面板往下拖拽滚动条,找到Preview Tab section, unchecked "Preview selected files in Solution Explorer (Altclick t…...
网络工程师 (49)UDP协议
前言 UDP协议,即用户数据报协议(User Datagram Protocol),是一种无连接的、不可靠的、面向报文的传输层通信协议。 一、基本特点 无连接性:UDP在发送数据之前不需要与目标设备建立连接,也无需在数据发送结束…...
了解大数据
一、大数据的特点: 1.大量 2.高速 3.多样 结构化数据和非结构化数据 4.低价值密度 二、大数据的应用场景:视频推荐、电商推荐等 三、大数据的技术发展脉络 阶段1:单机时代 阶段2:大数据时代-分布式处理 阶段3:实…...
命令模式
1. 命令模式简介 命令模式(Command Pattern)是一种行为型设计模式,它将一个请求封装为一个对象,从而使您可以用不同的请求对客户进行参数化、对请求排队或记录请求日志,以及支持可撤销的操作。命令模式的核心思想是将操作和操作的执行者解耦,使得操作可以独立于执行者进…...
解放大脑!用DeepSeek自动生成PPT!
DeepSeek应用(PPT篇) DeepSeek作为当前最好的AI大模型之一,其强大的文本生成能力被广泛的应用于各个领域,本文我们来聊聊用DeepSeek来自动生成PPT。 一、DeepSeek & PPT DeepSeek本身没有直接生成PPT的能力,换个…...
GUI编程(window系统→Linux系统)
最近有个项目需要将windows系统的程序往Linux系统上面移植,由于之前程序没有考虑过多平台兼容的问题,导致部分功能不可用以下是对近期遇到的问题的总结,以及相应的解决方案和经验分享。 1. Python 模块安装与管理 在 Linux 系统中࿰…...
互推机制在开源AI智能名片2+1链动模式S2B2C商城小程序源码推广中的应用探索
摘要: 在数字化营销时代,开源AI智能名片21链动模式S2B2C商城小程序源码作为一种创新的技术解决方案,正逐步成为企业数字化转型的重要工具。然而,面对激烈的市场竞争,如何高效推广这一前沿技术产品,成为开发…...
Pytorch实现之特征损失与残差结构稳定GAN训练,并训练自己的数据集
简介 简介:生成器和鉴别器分别采用了4个新颖设计的残差结构实现,同时在损失中结合了鉴别器层的特征损失来提高模型性能。 论文题目:Image Generation by Residual Block Based Generative Adversarial Networks(基于残留块的生成对抗网络产生图像) 会议:2022 IEEE Int…...
ES6相关操作(2)
一.Promise Promise是ES6引入的异步编程工具。 语法上Promise是一个构造函数,用于封装异步操作并可以获取操作成功或失败的结果 Promise构造函数:Promise(excutor){} Promise的常用函数:then,catch 实例化Promise对象(创建Promise工具) let data"请求数据"//该数据为…...
自动化办公|xlwings生成图表
在日常的数据分析和报告生成中,Excel图表是一个非常重要的工具。它能够帮助我们直观地展示数据,发现数据中的规律和趋势。然而,手动创建和调整图表往往耗时且容易出错。幸运的是,借助Python的xlwings库,我们可以自动化…...
大模型知识蒸馏技术(5)——在线蒸馏
版权声明 本文原创作者:谷哥的小弟作者博客地址:http://blog.csdn.net/lfdfhl1. 在线蒸馏概述 在线蒸馏是一种知识蒸馏方式,其核心特点是教师模型和学生模型的参数在训练过程中同时更新,整个蒸馏框架是端到端训练的。这种方式允许教师模型和学生模型相互影响、共同学习,能…...
Java 条件语句
Java 条件语句概述 条件语句通过判断给定条件的真假来控制程序的执行。本小节将详细介绍 Java 中各类条件语句。 1. if 语句 1.1 语法 用于根据给定条件决定是否执行一段代码。if 块仅在关联的布尔表达式为 true 时执行。 if (条件) {// 当条件成立时执行此处代码 }大括号…...
用JMeter给要登录的操作做压力测试
压力测试的http请求路径如下图 应当添加http Header Manager,设置登录凭证...
算法的数学基础
组合数 从n个不同元素中取出m(m≤n)个不同元素的所有组合的个数:C(n, m) n! / [m!(n - m)!]n个物品所有可能的组合数(不考虑组合的大小m):Σ C(n, m) C(n, 0) C(n, 1) C(n, 2) … C(n, n) 2 n 2^n 2…...
flowable适配达梦数据库
文章目录 适配相关问题无法从数据库产品名称“DM DBMS”中推断数据库类型分析解决 构建ibatis SqlSessionFactory时出错:inStream参数为null分析解决 liquibase相关问题问题一:不支持的数据库 Error executing SQL call current_schema: 无法解析的成员访…...
VScode C语言学习开发环境;运行提示“#Include错误,无法打开源文件stdio.h”
C/C环境配置 参考: VS Code 配置 C/C 编程运行环境(保姆级教程)_vscode配置c环境-CSDN博客 基本步骤 - 安装MinGW-W64,其包含 GCC 编译器:bin目录添加到环境变量;CMD 中输入gcc --version或where gcc验证…...
DeepSeek企业级部署实战指南:从服务器选型到Dify私有化落地
对于个人开发者或尝鲜者而言,本地想要部署 DeepSeek 有很多种方案,但是一旦涉及到企业级部署,则步骤将会繁琐很多。 比如我们的第一步就需要先根据实际业务场景评估出我们到底需要部署什么规格的模型,以及我们所要部署的模型&…...
自制简单的图片查看器(python)
图片格式:支持常见的图片格式(JPG、PNG、BMP、GIF)。 import os import tkinter as tk from tkinter import filedialog, messagebox from PIL import Image, ImageTkclass ImageViewer:def __init__(self, root):self.root rootself.root.…...
生成xcframework
打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式,可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...
新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案
随着新能源汽车的快速普及,充电桩作为核心配套设施,其安全性与可靠性备受关注。然而,在高温、高负荷运行环境下,充电桩的散热问题与消防安全隐患日益凸显,成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...
大学生职业发展与就业创业指导教学评价
这里是引用 作为软工2203/2204班的学生,我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要,而您认真负责的教学态度,让课程的每一部分都充满了实用价值。 尤其让我…...
七、数据库的完整性
七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...
Selenium常用函数介绍
目录 一,元素定位 1.1 cssSeector 1.2 xpath 二,操作测试对象 三,窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四,弹窗 五,等待 六,导航 七,文件上传 …...
2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师(题目+回答)
安全领域各种资源,学习文档,以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具,欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...
comfyui 工作流中 图生视频 如何增加视频的长度到5秒
comfyUI 工作流怎么可以生成更长的视频。除了硬件显存要求之外还有别的方法吗? 在ComfyUI中实现图生视频并延长到5秒,需要结合多个扩展和技巧。以下是完整解决方案: 核心工作流配置(24fps下5秒120帧) #mermaid-svg-yP…...
ZYNQ学习记录FPGA(一)ZYNQ简介
一、知识准备 1.一些术语,缩写和概念: 1)ZYNQ全称:ZYNQ7000 All Pgrammable SoC 2)SoC:system on chips(片上系统),对比集成电路的SoB(system on board) 3)ARM:处理器…...
密码学基础——SM4算法
博客主页:christine-rr-CSDN博客 专栏主页:密码学 📌 【今日更新】📌 对称密码算法——SM4 目录 一、国密SM系列算法概述 二、SM4算法 2.1算法背景 2.2算法特点 2.3 基本部件 2.3.1 S盒 2.3.2 非线性变换 编辑…...
【Java多线程从青铜到王者】单例设计模式(八)
wait和sleep的区别 我们的wait也是提供了一个还有超时时间的版本,sleep也是可以指定时间的,也就是说时间一到就会解除阻塞,继续执行 wait和sleep都能被提前唤醒(虽然时间还没有到也可以提前唤醒),wait能被notify提前唤醒…...
