Tailwind CSS 学习笔记(一)

一、简介

Tailwind CSS是一个工具优先的CSS 框架,只需书写HTML 代码,无需书写CSS,即可快速构建美观的网站。


二、优点

1、简洁、规整,避免了随意取类名

        Tailwind CSS 的工具类(Utility classes) 能够为你提供一套约束系统,避免让你的样式表中出现随意的取值。它让颜色、间距、排版、阴影以及一切取值保持一致,并最终形成一个精心构建的设计系统

2、灵活性强、你所想地就能实现

        由于Tailwind 抽象层级较低,因此它从不鼓励将同一个设计应用到两个网站上。即使使用相同的调色板(color palette) 和尺寸设置,也能很容易地让同样地组件,具有完全不同地外观。

3、体积小,绝不包含任何用不到地css 代码

        Tailwind 会在针对生产环境进行构建时自动删除所有未使用到地CSS 代码,也就是说你所获得地最终地 CSS 代码包地尺寸是最小地。事实上,大部分Tailwind 项目所生成地CSS 代码包都小于 10kB。

4、响应式设计贯穿整个框架

        在任何工具类前面添加一个代表屏幕尺寸地前缀,然后就能看到它神奇地作用到某个特定地断点(breakpoint) 上了。

5、支持鼠标悬停和焦点状态

        将 hover: 前缀添加到 你所要使用的 CSS 类的名称前面即可。支持 focus、 activedisabled、 focus-withinfocus-visible 以及 我们自己所创造的一些奇妙的状态,例如 group-hover

<

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

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

相关文章

Python自动点击器开发教程 - 支持键盘连按和鼠标连点

Python自动点击器开发教程 - 支持键盘连按和鼠标连点 这里写目录标题 Python自动点击器开发教程 - 支持键盘连按和鼠标连点项目介绍开发环境安装依赖核心代码解析1. 键盘模拟实现2. 鼠标点击实现 开发要点使用说明注意事项优化建议打包发布项目源码开发心得参考资料成品工具 项…

Cursor插件市场打不开解决

问题现象&#xff1a; cursor搜索插件的时候提示错误&#xff0c;无法搜索安装插件 error while fetching extensions.failed to fetch 问题原因 cursor默认安装使用的并不是vs code的插件市场&#xff0c;国内网络有时候打不开 解决 修改插件市场地址并重启cursor 打开cur…

【DeepSeek】本地部署DeepSeek的完整教程(Ollama+Docker+Open WebUI)

本地部署DeepSeek的完整教程 文章目录 本地部署DeepSeek的完整教程写在前面技术需求详细步骤一. 安装Ollama软件二. 安装DeepSeek-R1模型三. 安装Docker软件四. 配置Web UI界面问题解决1. 打开`docker desktop`时,一直显示`Docker Engine stopped`2. 用`Docker`拉取`Open WebU…

Java创造型模式之原型模式详解

设计模式是面向对象设计中的一种标准方法&#xff0c;用于解决常见的设计问题。原型设计模式&#xff08;Prototype Pattern&#xff09;是23种经典设计模式之一&#xff0c;属于创建型模式&#xff0c;它允许通过复制现有对象来创建新对象&#xff0c;而不是通过构造函数或工厂…

python-leetcode 54.全排列

题目&#xff1a; 给定不含重复数字的数组nums,返回其所有可能的全排列&#xff0c;可以按任意顺序返回答案 回溯法 一种通过探索所有可能的候选解来找出所有的解的算法。如果候选解被确认不是一个解&#xff08;或者至少不是最后一个解&#xff09;&#xff0c;回溯算法会通…

python局部变量和全局变量

文章目录 1.局部变量和全局变量2.局部变量2.1 局部变量的作用2.2 局部变量的生命周期 3. 全局变量3.1 函数不能直接修改全局变量的引用3.2 在函数内部修改全局变量的值3.3 全局变量定义的位置3.4 全局变量命名的建议 1.局部变量和全局变量 &#xff08;1&#xff09;局部变量 …

华为中小型企业项目案例

实验目的(1) 熟悉华为交换机和路由器的应用场景 (2) 掌握华为交换机和路由器的配置方法 实验拓扑实验拓扑如图所示。 华为中小型企业项目案例拓扑图 实验配置市场部和技术部的配置创建VLANLSW1的配置 [LSW1]vlan batch 10 20 [LSW1]q…

深度学习-简介

一、几个概念 &#xff08;1&#xff09;what is ai including? 看一张图&#xff1a; 这里注意机器学习和深度学习的关系 &#xff08;2&#xff09;机器学习和模式识别有什么区别&#xff1f; 和机器学习同领域的有一个词叫做模式识别&#xff0c;二者有什么区别呢? 机…

Unity小框架之单例模式基类

单例模式&#xff08;Singleton Pattern&#xff09;是一种常用的创建型设计模式&#xff0c;其核心目标是确保一个类只有一个实例&#xff0c;并提供一个全局访问点。它常用于需要控制资源访问、共享配置或管理全局状态的场景&#xff08;如数据库连接池、日志管理器、应用配置…

安装 Powerlevel10k 及 Oh My Zsh 的使用

1. 简介 Powerlevel10k 是 Oh My Zsh 最流行的终端主题&#xff0c;它不仅美观&#xff0c;还提供 Git 状态显示、命令执行时间、网络状态、Python 虚拟环境指示等 实用功能。相比其他主题&#xff0c;Powerlevel10k 速度更快、可定制性更强。 本教程将详细介绍如何安装 Powe…

verilog有符号数处理摘要

在FPGA设计中&#xff0c;一般的算数运算符都是按照无符号数进行的。那么需要有符号数计算的时候&#xff0c;该怎么办呢&#xff1f; 很久很久以前也就是Verilog-2001还没有出现时&#xff0c;是手动操作的&#xff0c;也就是说&#xff0c;对于一个8位的无符号数&#xff0c…

在IDEA中连接达梦数据库:详细配置指南

达梦数据库&#xff08;DM Database&#xff09;作为国产关系型数据库的代表&#xff0c;广泛应用于企业级系统开发。本文将详细介绍如何在IntelliJ IDEA中配置并连接达梦数据库&#xff0c;助力开发者高效完成数据库开发工作。 准备工作 1. 下载达梦JDBC驱动 访问达梦官方资…

app.config.globalProperties

目录 一:基础使用 1、简介 2、使用 3、打印结果: 二:封装 1、创建一个.ts文件(utils/msg.ts) 2、在main.ts中全局注册 3、在页面中使用 4、打印结果 一:基础使用 1、简介 app.config.globalProperties 是 Vue 3 应用实例&#xff08;app&#xff09;的一个配置属性&…

openai 标准化协议 Structured Outputs 具体示例教程

Structured Outputs 具体示例教程 场景&#xff1a;个人财务管理助手 假设我们要构建一个 AI 助手&#xff0c;帮助用户记录和管理个人财务支出。用户可以输入自然语言描述&#xff08;如“昨天我花了50元买了午餐”&#xff09;&#xff0c;助手将提取关键信息并以结构化 JS…

16.使用读写包操作Excel文件:XlsxWriter 包

一 XlsxWriter 的介绍 XlsxWriter 只能写入 Excel 文件。 OpenPyXL 和 XlsxWriter 的区别在笔记 15 。 二 如何使用 XlsxWriter 1.导包 import datetime as dtimport xlsxwriterimport excel 2.实例化工作簿 book xlsxwriter.Workbook("xlxswriter.xlsx") book.clo…

ChatGPT and Claude国内使用站点

RawChat kelaode chatgptplus chatopens&#xff08;4.o mini免费&#xff0c;plus收费&#xff09; 网页&#xff1a; 定价&#xff1a; wildcard 网页&#xff1a; 虚拟卡定价&#xff1a; 2233.ai 网页&#xff1a; 定价&#xff1a; MaynorAPI chatgpt cla…

【MySQL】MySQL审计工具Audit Plugin安装使用

MySQL审计工具Audit Plugin安装使用 https://www.cnblogs.com/waynechou/p/mysql_audit.html MySQL 5.6 开启审计功能 https://blog.51cto.com/u_15127556/4344503 MySQL之添加日志审计功能 https://blog.csdn.net/weixin_43279032/article/details/105507170 MySQL开启日志记录…

QT 磁盘文件 教程04-创建目录、删除目录、遍历目录

【1】新建目录 bool CreateDir(QString name){QString fileName name ;QDir dir(fileName);if (dir.isEmpty()) {dir.mkdir(fileName);return true;}else{qDebug()<<"文件夹已存在";return false;} } 【2】删除目录 bool DeleteDir(QString fileName){if (…

Git——分布式版本控制工具使用教程

本文主要介绍两种版本控制工具——SVN和Git的概念&#xff0c;接着会讲到Git的安装&#xff0c;Git常用的命令&#xff0c;以及怎么在Vscode中使用Git。帮助新手小白快速上手Git。 1. SVN和Git介绍 1.1 SVN 集中式版本控制工具&#xff0c;版本库是集中存放在中央服务器的&am…

Vue:添加响应式数据

Vue&#xff1a;添加响应式数据 1. 什么是响应式&#xff1f; 修改 data 后&#xff0c;页面自动改变/刷新&#xff0c;这就是响应式。就像我们在使用 Excel 的时候&#xff0c;修改一个单元格中的数据&#xff0c;其它单元格的数据会联动更新&#xff0c;这也是响应式。在前…