Hero Image
OAuth2.0 与 OpenID Connect 认证授权原理与实战

OAuth2.0 与 OpenID Connect 认证授权原理与实战 一、前言 在现代 Web 和移动应用中，安全的认证与授权机制至关重要。OAuth2.0 和 OpenID Connect（OIDC）已成为主流的认证授权协议，被广泛应用于第三方登录、API 安全等场景。本文将系统讲解 OAuth2.0 与 OIDC 的原理、流程、常见模式、实战代码与最佳实践。 二、OAuth2.0 基本原理 1. OAuth2.0 是什么？ OAuth2.0 是一种授权框架，允许第三方应用在资源所有者授权的前提下，代表用户访问受保护的资源，而无需暴露用户的账号密码。 认证（Authentication）：确认用户身份 授权（Authorization）：确认用户是否有权限访问资源 OAuth2.0 只解决授权，不解决认证。 2. 角色定义 Resource Owner（资源所有者）：通常是用户 Client（客户端）：第三方应用 Authorization Server（授权服务器）：颁发令牌 Resource Server（资源服务器）：存储受保护资源 3. 授权流程图 sequenceDiagram participant User participant Client participant AuthServer participant ResourceServer User->>Client: 请求受保护资源 Client->>User: 跳转到授权服务器 User->>AuthServer: 登录并授权 AuthServer-->>User: 授权码 User->>Client: 返回授权码 Client->>AuthServer: 用授权码换取令牌 AuthServer-->>Client: 返回 Access Token Client->>ResourceServer: 携带 Token 访问资源 ResourceServer-->>Client: 返回资源 三、OAuth2.0 四种授权模式 授权码模式（Authorization Code） 适用于 Web 应用，安全性高，推荐使用。

Sunday, June 9, 2024 | 2 minutes Read
Hero Image
Python 新工具 uv：极速包管理与虚拟环境体验

Python 新工具 uv：极速包管理与虚拟环境体验 作者：一缘（zhuty.com） 一、工具背景与诞生 Python 生态长期以来依赖 pip、virtualenv、poetry、conda 等工具进行包管理和虚拟环境维护。2024 年，Astral 推出了全新开源工具 uv，主打“极致性能、兼容 pip、体验现代化”，迅速成为 Python 社区关注的焦点。 用 Rust 编写，极致性能，依赖安装速度远超 pip/poetry 兼容 pip、requirements.txt、pyproject.toml 内置虚拟环境管理，无需额外 virtualenv 支持缓存、锁定、依赖分析等现代特性 uv 官方主页 二、主要特性一览 极速依赖安装（Rust 实现，性能极强） 兼容 pip/requirements.txt/pyproject.toml 一键创建和激活虚拟环境 支持依赖锁定（uv.lock） 自动缓存 wheel 包，重复安装更快 支持依赖树分析、冲突检测 跨平台（Windows、macOS、Linux） 三、安装与快速上手 1. 安装 uv 使用 pipx 安装（推荐） pipx install uv 或直接用 pip pip install uv 或下载预编译二进制 详见 官方发布页 2. 创建并激活虚拟环境 uv venv source .venv/bin/activate # Linux/macOS .venv\Scripts\activate # Windows 3. 安装依赖包 uv pip install requests flask 4. 生成/同步锁文件 uv pip sync # 按 requirements.txt 或 pyproject.toml 安装依赖 四、常见用法与命令速查 创建虚拟环境：uv venv 安装依赖：uv pip install <package> 升级依赖：uv pip install -U <package> 卸载依赖：uv pip uninstall <package> 生成锁文件：uv pip freeze > requirements.txt 同步依赖：uv pip sync 查看依赖树：uv pip list --tree 清理缓存：uv cache clean 五、与 pip/poetry/conda 对比 工具 性能 虚拟环境 依赖锁定 兼容性 生态/扩展 uv 极快（Rust） 内置 支持 pip/poetry 新兴 pip 一般 需配合 venv 不支持 官方标准 成熟 poetry 较快 内置 支持 pyproject 成熟 conda 一般 内置 支持 conda/pip 科学计算强 uv 兼容 pip 生态，性能远超 pip/poetry，适合追求极致效率的开发者 poetry 适合项目管理和发布，conda 适合科学计算和多语言依赖 六、适用场景与注意事项 适合日常开发、CI/CD、依赖频繁变更的项目 兼容 pip/poetry 项目迁移无压力 目前生态仍在完善，部分极端场景建议先测试 建议结合 pipx 管理 uv，避免全局依赖冲突 七、总结与展望 uv 以极致性能和现代体验，正在重塑 Python 包管理和虚拟环境生态。推荐所有 Python 开发者尝试 uv，享受更快、更智能的依赖管理体验。

Sunday, June 9, 2024 | 1 minute Read
Hero Image
业务场景下的技术选型与权衡

业务场景下的技术选型与权衡 资深前端转全栈的架构成长笔记 一、前言 技术选型是全栈开发和架构设计中最具挑战性的环节之一。面对多样的业务需求和技术生态，如何做出合理的技术决策，既要兼顾当前业务落地，也要考虑未来的可扩展性和团队协作。本文结合实际项目经验，系统梳理技术选型的核心原则、常见权衡、实战案例与经验总结。 二、常见业务场景与选型挑战 高并发电商系统：需权衡性能、扩展性与一致性 内容管理平台（CMS）：需兼顾灵活性、易用性与安全性 数据分析与可视化：需考虑数据量、实时性与前端渲染能力 企业级后台管理：需关注权限、稳定性与开发效率 移动端/小程序后端：需兼容多端、接口简洁、低延迟 三、技术选型的核心原则 业务优先：技术为业务服务，避免为技术而技术 团队能力：选型需考虑团队现有技术栈和学习成本 生态与社区：优先选择有活跃社区和文档的技术 可维护性与扩展性：关注后期维护和二次开发的难度 成本与风险：评估引入新技术的成本、风险与收益 四、实际案例与权衡分析 案例1：高并发下的数据库选型 场景：秒杀/抢购业务，读写压力大，数据一致性要求高 选型对比： MySQL + Redis 缓存：读多写少，缓存穿透/击穿需防护 分布式 NoSQL（如 MongoDB）：高并发写入，弱一致性 NewSQL（如 TiDB）：兼顾扩展性与强一致性，但运维复杂 权衡： 业务核心数据优先 MySQL，热点数据用 Redis 缓存，非核心日志/埋点可用 MongoDB 需设计缓存失效、数据同步与降级方案 案例2：前端框架选型（React vs Vue vs Angular） 场景：企业级后台管理系统，团队成员背景多样 选型对比： React：灵活、生态丰富，适合大型项目 Vue：上手快、文档友好，适合中小团队 Angular：全家桶、规范强，适合大型企业 权衡： 团队有 React 经验优先 React，追求快速交付可选 Vue 需考虑后续维护、招聘与社区活跃度 案例3：API 设计 RESTful vs GraphQL 场景：前后端分离，数据结构复杂，接口频繁变更 选型对比： RESTful：简单直观，易于缓存和监控 GraphQL：前端灵活取数，减少接口数量，学习曲线高 权衡： 业务接口稳定优先 RESTful，需求多变/前端主导可选 GraphQL 需评估团队学习成本与后端改造难度 案例4：微服务 vs 单体架构 场景：创业公司初期 vs 业务快速扩展期 选型对比： 单体：开发快、部署简单，适合早期 微服务：灵活扩展、技术多样，运维复杂 权衡： 初期单体，业务成熟后逐步微服务化，避免一开始就过度设计 五、选型踩坑与经验总结 盲目追新：新技术不等于适合业务，需小规模试点验证 忽视团队能力：选型脱离团队实际，易导致项目延期 生态不活跃：小众技术后期维护难，遇到 bug 求助无门 过度设计：架构过重，反而拖慢业务迭代 忽略运维与监控：上线后发现部署、监控、扩容困难 六、结语 技术选型没有银弹，只有适合当前业务和团队的“最优解”。建议每次选型都做好调研、试点和复盘，持续优化团队的技术决策能力。

Sunday, June 9, 2024 | 1 minute Read
Hero Image
全栈开发中的数据建模与数据库选型

全栈开发中的数据建模与数据库选型 资深前端转全栈开发的成长笔记 一、前言 全栈开发者不仅要写好前端页面，还要设计高效、可扩展的数据模型和选择合适的数据库。本文结合实际项目经验，系统梳理数据建模原则、数据库选型、ORM 框架实践与实战案例，助你打通前后端数据思维。 二、前端视角下的数据建模误区 只关注界面数据结构，忽略数据规范化与冗余 习惯用扁平 JSON，难以应对复杂关联 忽视数据一致性与约束（如唯一性、外键） 过度依赖前端状态管理，后端数据模型混乱 示例：前端常见的扁平数据结构 { "id": 1, "title": "全栈开发", "author": "Tom", "tags": ["全栈", "数据库"] } 后端建模需考虑： 关系（如用户-文章-评论） 约束（唯一、非空、外键） 扩展性与性能 三、关系型 vs. NoSQL 数据库选型 1. 关系型数据库（如 MySQL/PostgreSQL） 结构化数据，强约束，支持事务 适合有明确关系、强一致性需求的场景 支持 SQL 查询、JOIN、多表事务 2. NoSQL 数据库（如 MongoDB/Redis） 灵活的数据结构（文档、键值、列族、图） 适合高并发、海量数据、灵活 schema 的场景 一般不支持复杂事务，弱一致性 3. 选型建议 业务数据有复杂关系、强一致性：优先关系型 需求变化快、数据结构灵活：可选 NoSQL 混合架构：如主数据用 MySQL，缓存/日志用 Redis/MongoDB 四、ORM 框架实践 ORM（对象关系映射）让开发者用面向对象方式操作数据库，提升开发效率。 Node.js：Prisma、TypeORM、Sequelize、Mongoose（MongoDB） Python：SQLAlchemy、Django ORM Java：Hibernate、JPA Prisma 示例（TypeScript + PostgreSQL）： model Post { id Int @id @default(autoincrement()) title String content String? author User @relation(fields: [authorId], references: [id]) authorId Int tags Tag[] createdAt DateTime @default(now()) } model User { id Int @id @default(autoincrement()) name String posts Post[] } model Tag { id Int @id @default(autoincrement()) name String @unique posts Post[] } Mongoose 示例（Node.js + MongoDB）：

Sunday, June 9, 2024 | 2 minutes Read
Hero Image
config-ajax

传统的实现 最传统的接口调用一般是封装一个方法, 然后里面请求接口, 回调获取接口返回: let $ = require('jquery') function getData(url) { $.get(url, function(data, status){ //TODO: 对接口返回处理 }) } 进阶的实现 虽然后面出现了Promise, 但依然没有跳出回调地狱: let axios = require('axios') function getData(url) { axios.get(url).then(function(data, status){ //TODO: 对接口返回处理 }) } 更进阶的实现 利用 async await 解决回调地狱, 由于async await 只会在promise resolve 触发, 因此对 promise 再包装一层promise, 以获取里面一层promise触发reject 回调数据: let axios = require('axios') function getData(url) { return new Promise((resolve, reject) => { axios.get(url).then(function(data, status){ //TODO: 对接口返回处理 resolve({code:0, data: data}) }, function(e){ //TODO: 网络异常 resolve({code: -1, data: data}) }) } } 代码升华实现 通常, 我们对接口的请求及接口逻辑实现会封装在一个方法里面, 例如上面的getData方法. 但此处逻辑所有接口基本是一致的, 我们追求的完美就是: 用最少的代码实现最强大的功能! 不出现任何两个逻辑相同的方法.

    Saturday, June 1, 2024 | 1 minute Read
    Hero Image
    dart-lang

    Dart 简介 Dart是一种适用于万维网的开放源代码编程语言，由Google主导开发，于2011年10月公开。它的开发团队由Google Chrome浏览器V8引擎团队的领导者拉尔斯·巴克主持，目标在于成为下一代结构化Web开发语言。 类似JavaScript，Dart也是一种面向对象语言，但是它采用基于类编程。它只允许单一继承，语法风格接近C语言。 发展历史 2011年Google在丹麦奥胡斯（Aarhus）举行的“GOTO国际软件开发大会”预告将发布新网页编程语言Dart，是一种基于类编程语言（class-based programming language），在所有浏览器都能够有高性能的运行效率。2011年10月10日Google宣布推出Dart的预览版。 Google在dartlang.org公布Dart开发工具及源代码示例等内容，同时也提供相关虚拟机平台。当前Dart有两种方式运行：一是在本地的虚拟机上，二是将Dart代码转成Javascript，直接在Javascript引擎上运行 稳定版本 2.1 , 在2018年11月15发布 标准化 ECMA已经成立技术委员会TC52[6]展开标准化Dart的工作，同时由于Dart能够被编译成标准的JavaScript，它能够有效地在所有现代浏览器上运行。2014年7月，ECMA的第107次全体大会通过了第一版Dart语言规范 Dart SDK 构成 SDK 包含 Dart VM、dart2js、Pub、库和工具 Dart 编译模式 Dart 支持 JIT (Just In Time) 运行时编译和 AOT (Ahead Of Time) 预编译 Dart 优势 Dart 可以更轻松地创建以 60fps 运行的流畅动画和转场。Dart 可以在没有锁的情况下进行对象分配和垃圾回收。就像 JavaScript 一样，Dart 避免了抢占式调度和共享内存（因而也不需要锁）。由于 Flutter 应用程序被编译为本地代码，因此它们不需要在领域之间建立缓慢的桥梁（例如，JavaScript 到本地代码）。它的启动速度也快得多 Dart 使 Flutter 不需要单独的声明式布局语言，如 JSX 或 XML，或单独的可视化界面构建器，因为 Dart 的声明式编程布局易于阅读和可视化。所有的布局使用一种语言，聚集在一处，Flutter 很容易提供高级工具，使布局更简单 Dart 跨平台性更强 Dart 入门更简单 Dart 资源汇总 Dart 官网: https://www.dartlang.org Dart 在线代码运行: https://dartpad.dartlang.org

      Saturday, June 1, 2024 | 14 minutes Read
      Hero Image
      Docker 私有化镜像仓库 - Harbor

      转载自： https://blog.51cto.com/u_13760351/2532347 Harbor 仓库介绍 Docker容器应用的开发和运行离不开可靠的镜像管理，虽然Docker官方也提供了公共的镜像仓库，但是从安全和效率等方面考虑，部署私有环境内的Registry也是非常必要的。Harbor是由VMware公司开源的企业级的Docker Registry管理项目，它包括权限管理(RBAC)、LDAP、日志审核、管理界面、自我注册、镜像复制和中文支持等功能。 Harbor核心组件解释 Proxy：他是一个nginx的前端代理，代理Harbor的registry,UI, token等服务。 db：负责储存用户权限、审计日志、Dockerimage分组信息等数据。 UI：提供图形化界面，帮助用户管理registry上的镜像, 并对用户进行授权。 jobsevice：jobsevice是负责镜像复制工作的，他和registry通信，从一个registry pull镜像然后push到另一个registry，并记录job_log。 Adminserver：是系统的配置管理中心附带检查存储用量，ui和jobserver启动时候回需要加载adminserver的配置。 Registry：镜像仓库，负责存储镜像文件。 Log：为了帮助监控Harbor运行，负责收集其他组件的log，供日后进行分析。 Harbor和Registry的比较 Harbor和Registry都是Docker的镜像仓库，但是Harbor作为更多企业的选择，是因为相比较于Regisrty来说，它具有很多的优势。 1.提供分层传输机制，优化网络传输 Docker镜像是是分层的，而如果每次传输都使用全量文件(所以用FTP的方式并不适合)，显然不经济。必须提供识别分层传输的机制，以层的UUID为标识，确定传输的对象。 2.提供WEB界面，优化用户体验 只用镜像的名字来进行上传下载显然很不方便，需要有一个用户界面可以支持登陆、搜索功能，包括区分公有、私有镜像。 3.支持水平扩展集群 当有用户对镜像的上传下载操作集中在某服务器，需要对相应的访问压力作分解。 4.良好的安全机制 企业中的开发团队有很多不同的职位，对于不同的职位人员，分配不同的权限，具有更好的安全性。 5.Harbor提供了基于角色的访问控制机制，并通过项目来对镜像进行组织和访问权限的控制。kubernetes中通过namespace来对资源进行隔离，在企业级应用场景中，通过将两者进行结合可以有效将kubernetes使用的镜像资源进行管理和访问控制，增强镜像使用的安全性。尤其是在多租户场景下，可以通过租户、namespace和项目相结合的方式来实现对多租户镜像资源的管理和访问控制。 安装环境 1.docker 版本17.06.0+ 2.docker-compose 版本 1.18.0+ 3.关闭防火墙，安全性 4.CentOS 7 系统，可联网 一、安装docker步骤 1.添加docker-ce源 cd /etc/yum.repos.d wget http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo 注意：若无法使用wget下载，可先下载，再上传到Linux相关目录下 2.安装docker yum -y install docker-ce 3.启动docker systemctl start docker 4.将docker设置为开机自启 systemctl enable docker 二、安装docker-compse 1.先安装epel源 yum install -y epel-release 2.安装docker-compose yum -y install docker-compose 三、安装harbor仓库 1.下载harbor离线安装包 下载地址： https://storage.googleapis.com/harbor-releases/ 可选择最新版本下载

        Saturday, June 1, 2024 | 1 minute Read
        Hero Image
        kubernete入门（一）

        需要安装 cri-docker 因为 1.24 版本后移除了这个服务， 所以要单独安装上 cri-dockerd is a project based on the legacy built-in Docker Engine support that was removed from the kubelet in version 1.24. 官网介绍 安装方式推荐源码安装， 虽然github 有 release 版本， 那个是可执行文件， 并没加入到系统服务 apt install golang-go git clone https://github.com/Mirantis/cri-dockerd.git cd cri-dockerd mkdir bin cd src && go get && go build -o ../bin/cri-dockerd cd .. # Run these commands as root mkdir -p /usr/local/bin install -o root -g root -m 0755 bin/cri-dockerd /usr/local/bin/cri-dockerd cp -a packaging/systemd/* /etc/systemd/system sed -i -e 's,/usr/bin/cri-dockerd,/usr/local/bin/cri-dockerd,' /etc/systemd/system/cri-docker.service systemctl daemon-reload systemctl enable cri-docker.service systemctl enable --now cri-docker.socket node 节点加入集群问题 由于没有cri-docker 需要指定 –cri-socket 报错显示：

          Saturday, June 1, 2024 | 1 minute Read
          Hero Image
          Linux 磁盘挂载

          查看磁盘挂载情况 df -h 查看磁盘列表 fdisk -l 格式化磁盘 mkfs.ext4 /dev/sdb 挂载 mount /dev/sdb /data 开机自动挂载 echo "/dev/sdb /data ext4 defaults 0 0" >> /etc/fstab

            Saturday, June 1, 2024 | 1 minute Read
            Hero Image
            ros-web-video-server

            作用 添加新的__ros node__将ros图片数据使用图片流的方式展示在网页或者其他客户端。 安装 source /opt/ros/melodic/setup.bash # 确定 ROS 版本安装位置 apt update apt install ros-melodic-web-video-server/bionic 启动服务 ## 读取ROS数据包 rosbag play /data/rosbags/demo.bag ## 启动 rosbrige_server roslaunch rosbridge_server rosbridge_websocket.launch ## 启动 web_video_server rosrun web_video_server web_video_server 查看 rosnode 列表 root@auto-rviz:~# rosnode list -a http://auto-rviz:36233/ /play_1647414945744209779 http://auto-rviz:35971/ /play_1647415243720760404 http://auto-rviz:40605/ /play_1647415508737113877 http://auto-rviz:45077/ /play_1647507285977221852 http://auto-rviz:32961/ /play_1648118232168130809 http://auto-rviz:40803/ /rosapi http://auto-rviz:35257/ /rosout http://auto-rviz:43259/ /web_video_server 显示图片流信息 web_video_server 出现在本地服务器端口 8080 上。之后打开浏览器打开 http://localhost:8080/stream?topic=/cloi1/camera/color/image_raw 就可以立即看到视频了，其实这不是视频，而是图片序列（图片不断更新），必须作为 HTML 标签使用。 <img src=""http://10.30.21.xxx:8080/stream?topic=/image_raw> 参考 mjpeg_server： 已停止维护 http://wiki.ros.org/mjpeg_server web_video_server： https://wiki.ros.org/web_video_server

              Saturday, June 1, 2024 | 1 minute Read
              Hero Image
              SELinux 开放关闭端口

              前提 很多朋友估计会有这种经历， 在 Linux 中监听某个端口时， 但并不能被别的机器访问。 这主要是是因为这个端口没有被开放， 因此不可以访问。 网上有很多关于怎么开放端口的， 今天介绍一个很实用的工具 - semanage semanage 简介 NAME semanage - SELinux Policy Management tool SYNOPSIS semanage {import,export,login,user,port,interface,module,node,fcontext,boolean,permissive,dontaudit,ibpkey,ibendport} ... positional arguments: import Import local customizations export Output local customizations login Manage login mappings between linux users and SELinux confined users user Manage SELinux confined users (Roles and levels for an SELinux user) port Manage network port type definitions interface Manage network interface type definitions module Manage SELinux policy modules node Manage network node type definitions fcontext Manage file context mapping definitions boolean Manage booleans to selectively enable functionality permissive Manage process type enforcement mode dontaudit Disable/Enable dontaudit rules in policy ibpkey Manage infiniband pkey type definitions ibendport Manage infiniband end port type definitions DESCRIPTION semanage is used to configure certain elements of SELinux policy without requiring modification to or recompilation from policy sources. This includes the mapping from Linux usernames to SELinux user identities (which controls the initial security context assigned to Linux users when they login and bounds their authorized role set) as well as security context mappings for various kinds of objects, such as network ports, interfaces, infiniband pkeys and endports, and nodes (hosts) as well as the file context mapping. See the EXAMPLES section below for some examples of common usage. Note that the semanage login command deals with the mapping from Linux usernames (logins) to SELinux user identities, while the semanage user command deals with the mapping from SELinux user identities to authorized role sets. In most cases, only the former mapping needs to be adjusted by the administrator; the latter is principally defined by the base policy and usually does not require modification. 查看开放的端口 semanage port -l | grep 5000 查看5000端口

                Saturday, June 1, 2024 | 2 minutes Read
                Hero Image
                Tailwindcss规则大全

                Tailwind CSS 是一个实用优先的 CSS 框架，提供了许多用于快速构建 UI 的预定义类。以下是 Tailwind CSS 的所有主要规则分类，以及它们的常见用法： 1. 布局 (Layout) Container: container Display: block, inline-block, inline, flex, inline-flex, grid, inline-grid, hidden Float: float-left, float-right, float-none Clear: clear-left, clear-right, clear-both, clear-none Object Fit: object-contain, object-cover, object-fill, object-none, object-scale-down Object Position: object-bottom, object-center, object-left, object-left-bottom, object-left-top, object-right, object-right-bottom, object-right-top, object-top Overflow: overflow-auto, overflow-hidden, overflow-visible, overflow-scroll, overflow-x-auto, overflow-y-auto Overscroll Behavior: overscroll-auto, overscroll-contain, overscroll-none Position: static, fixed, absolute, relative, sticky Top / Right / Bottom / Left: top-0, top-1, right-0, right-1, bottom-0, bottom-1, left-0, left-1 Visibility: visible, invisible, collapse Z-Index: z-0, z-10, z-20, z-30, z-auto 2. 间距 (Spacing) Padding: p-0, p-1, p-2, py-1, px-1, pt-1, pr-1, pb-1, pl-1 Margin: m-0, m-1, m-2, my-1, mx-1, mt-1, mr-1, mb-1, ml-1 Space Between: space-x-0, space-x-1, space-y-0, space-y-1 3. 大小 (Sizing) Width: w-0, w-1, w-2, w-1/2, w-full, w-screen, max-w-xs, max-w-sm, max-w-md Height: h-0, h-1, h-2, h-1/2, h-full, h-screen, max-h-xs, max-h-sm, max-h-md Min Width/Height: min-w-0, min-w-full, min-h-0, min-h-full 4. 排版 (Typography) Font Family: font-sans, font-serif, font-mono Font Size: text-xs, text-sm, text-base, text-lg, text-xl, text-2xl Font Smoothing: antialiased, subpixel-antialiased Font Style: italic, not-italic Font Weight: font-thin, font-extralight, font-light, font-normal, font-medium, font-semibold, font-bold, font-extrabold, font-black Letter Spacing: tracking-tighter, tracking-tight, tracking-normal, tracking-wide Line Height: leading-none, leading-tight, leading-snug, leading-normal, leading-loose Text Align: text-left, text-center, text-right, text-justify Text Color: text-transparent, text-black, text-white, text-red-500, text-green-500 Text Opacity: text-opacity-0, text-opacity-25, text-opacity-50, text-opacity-75, text-opacity-100 Text Decoration: underline, line-through, no-underline Text Transform: uppercase, lowercase, capitalize, normal-case Vertical Align: align-baseline, align-top, align-middle, align-bottom Whitespace: whitespace-normal, whitespace-nowrap, whitespace-pre, whitespace-pre-line Word Break: break-normal, break-words, break-all 5. 背景 (Background) Background Attachment: bg-fixed, bg-local, bg-scroll Background Clip: bg-clip-border, bg-clip-padding, bg-clip-content, bg-clip-text Background Color: bg-transparent, bg-black, bg-white, bg-red-500, bg-green-500 Background Opacity: bg-opacity-0, bg-opacity-25, bg-opacity-50, bg-opacity-75, bg-opacity-100 Background Position: bg-bottom, bg-center, bg-left, bg-left-bottom, bg-left-top, bg-right, bg-right-bottom, bg-right-top, bg-top Background Repeat: bg-repeat, bg-no-repeat, bg-repeat-x, bg-repeat-y, bg-repeat-round, bg-repeat-space Background Size: bg-auto, bg-cover, bg-contain Gradient Color Stops: from-blue-500, via-red-500, to-yellow-500 6. 边框 (Borders) Border Radius: rounded-none, rounded-sm, rounded, rounded-md, rounded-lg, rounded-full Border Width: border, border-0, border-2, border-4, border-8 Border Color: border-transparent, border-black, border-white, border-red-500, border-green-500 Border Opacity: border-opacity-0, border-opacity-25, border-opacity-50, border-opacity-75, border-opacity-100 Border Style: border-solid, border-dashed, border-dotted, border-double, border-none Divide Width: divide-x, divide-y, divide-x-reverse, divide-y-reverse Divide Color: divide-transparent, divide-black, divide-white, divide-red-500, divide-green-500 Divide Style: divide-solid, divide-dashed, divide-dotted, divide-double, divide-none Ring Width: ring, ring-0, ring-1, ring-2, ring-4, ring-8, ring-inset Ring Color: ring-transparent, ring-black, ring-white, ring-red-500, ring-green-500 Ring Opacity: ring-opacity-0, ring-opacity-25, ring-opacity-50, ring-opacity-75, ring-opacity-100 Ring Offset Width: ring-offset-0, ring-offset-1, ring-offset-2, ring-offset-4, ring-offset-8 Ring Offset Color: ring-offset-transparent, ring-offset-black, ring-offset-white, ring-offset-red-500, ring-offset-green-500 7. 效果 (Effects) Box Shadow: shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, shadow-2xl Box Shadow Color: shadow-transparent, shadow-black, shadow-white, shadow-red-500, shadow-green-500 Opacity: opacity-0, opacity-25, opacity-50, opacity-75, opacity-100 Mix Blend Mode: mix-blend-normal, mix-blend-multiply, mix-blend-screen, mix-blend-overlay, mix-blend-darken, mix-blend-lighten Background Blend Mode: bg-blend-normal, bg-blend-multiply, bg-blend-screen, bg-blend-overlay, bg-blend-darken, bg-blend-lighten 8. 表单 (Forms)（续） Outline: outline-none, outline, outline-dashed, outline-solid, outline-double Pointer Events: pointer-events-none, pointer-events-auto Resize: resize-none, resize, resize-y, resize-x User Select: select-none, select-text, select-all, select-auto 9. 表格 (Tables) Border Collapse: border-collapse, border-separate Table Layout: table-auto, table-fixed 10. 过渡与动画 (Transitions and Animation) Transition Property: transition-none, transition-all, transition Transition Duration: duration-75, duration-100, duration-150, duration-200, duration-300, duration-500, duration-700, duration-1000 Transition Timing Function: ease-linear, ease-in, ease-out, ease-in-out Transition Delay: delay-75, delay-100, delay-150, delay-200, delay-300, delay-500, delay-700, delay-1000 Animation: animate-none, animate-spin, animate-ping, animate-pulse, animate-bounce 11. 转换 (Transforms) Transform: transform, transform-gpu, transform-none Transform Origin: origin-center, origin-top, origin-top-right, origin-right, origin-bottom-right, origin-bottom, origin-bottom-left, origin-left, origin-top-left Scale: scale-0, scale-50, scale-75, scale-90, scale-95, scale-100, scale-105, scale-110, scale-125, scale-150 Rotate: rotate-0, rotate-45, rotate-90, rotate-180 Translate: translate-x-0, translate-x-1, translate-x-2, translate-x-3, translate-x-4, translate-y-0, translate-y-1, translate-y-2, translate-y-3, translate-y-4 Skew: skew-x-0, skew-x-3, skew-x-6, skew-x-12, skew-y-0, skew-y-3, skew-y-6, skew-y-12 12. 网格 (Grid) Grid Template Columns: grid-cols-1, grid-cols-2, grid-cols-3, grid-cols-4, grid-cols-5, grid-cols-6, grid-cols-7, grid-cols-8, grid-cols-9, grid-cols-10, grid-cols-11, grid-cols-12, grid-cols-none Grid Column: col-auto, col-span-1, col-span-2, col-span-3, col-span-4, col-span-5, col-span-6, col-span-7, col-span-8, col-span-9, col-span-10, col-span-11, col-span-12 Grid Column Start / End: col-start-1, col-start-2, col-start-3, col-start-auto, col-end-1, col-end-2, col-end-3, col-end-auto Grid Template Rows: grid-rows-1, grid-rows-2, grid-rows-3, grid-rows-4, grid-rows-5, grid-rows-6, grid-rows-none Grid Row: row-auto, row-span-1, row-span-2, row-span-3, row-span-4, row-span-5, row-span-6 Grid Row Start / End: row-start-1, row-start-2, row-start-3, row-start-auto, row-end-1, row-end-2, row-end-3, row-end-auto Gap: gap-0, gap-1, gap-2, gap-4, gap-6, gap-8, gap-10, gap-12, gap-x-0, gap-x-1, gap-x-2, gap-x-4, gap-y-0, gap-y-1, gap-y-2, gap-y-4 13. 弹性盒 (Flexbox) Flex Direction: flex-row, flex-row-reverse, flex-col, flex-col-reverse Flex Wrap: flex-no-wrap, flex-wrap, flex-wrap-reverse Flex: flex-1, flex-auto, flex-initial, flex-none Flex Grow: grow, grow-0 Flex Shrink: shrink, shrink-0 Order: order-1, order-2, order-3, order-first, order-last, order-none Justify Content: justify-start, justify-end, justify-center, justify-between, justify-around, justify-evenly Align Items: items-start, items-end, items-center, items-baseline, items-stretch Align Content: content-start, content-end, content-center, content-between, content-around, content-evenly Align Self: self-auto, self-start, self-end, self-center, self-stretch 14. 间隔 (Space Between) Space Between X-Axis: space-x-0, space-x-1, space-x-2, space-x-4, space-x-6, space-x-8, space-x-10 Space Between Y-Axis: space-y-0, space-y-1, space-y-2, space-y-4, space-y-6, space-y-8, space-y-10 Reverse X-Axis: space-x-reverse Reverse Y-Axis: space-y-reverse 15. 交互状态 (Interactivity) Appearance: appearance-none Cursor: cursor-auto, cursor-default, cursor-pointer, cursor-wait, cursor-text, cursor-move, cursor-not-allowed Outline: outline-none, outline, outline-dashed, outline-solid, outline-double Pointer Events: pointer-events-none, pointer-events-auto Resize: resize-none, resize, resize-y, resize-x User Select: select-none, select-text, select-all, select-auto 16. SVG (SVG) Fill: fill-current Stroke: stroke-current Stroke Width: stroke-0, stroke-1, stroke-2 17. 辅助 (Accessibility) Screen Readers: sr-only, not-sr-only 18. 响应式设计 (Responsive Design) Tailwind 提供的断点前缀： sm: (min-width: 640px) md: (min-width: 768px) lg: (min-width: 1024px) xl: (min-width: 1280px) 2xl: (min-width: 1536px) 19. 伪类 (Pseudo-Classes) 状态: hover:, focus:, active:, disabled:, visited: 表单: checked:, focus-within:, focus-visible:, indeterminate: 子选择器: first:, last:, odd:, even: 其他: group-hover:, group-focus:, group-active:, group-disabled:, group-visited:, group-checked:, group-first:, group-last:, group-odd:, group-even: 20. 自定义规则 定制 Tailwind CSS 可以让你根据项目的需求自定义样式、颜色、间距等设置。定制 Tailwind CSS 通常通过以下几种方式进行：

                  Saturday, June 1, 2024 | 6 minutes Read