当前位置：首页 > news >正文

前端样式库推广——TailwindCss

news 来源：原创 2025/8/9 11:47:51

官方网址： https://tailwindcss.com/docs/installation/using-vite
中文官方文档：https://www.tailwindcss.cn/
github地址：tailwindcss
正在使用tailwindcss的网站：https://tailwindcss.com/showcase

一看github，竟然有高达86.5+stars，这库不简单
它就是近几年很流行的 “原子化CSS框架” ——TailwindCss！

在这里插入图片描述

tailwindcss

一、TailwindCss功能展示
二、有什么优势？
- 1. 原子化css+高度定制化
- 2. 支持伪类写法
- 3. 强大的响应式
三、相关辅助插件推荐
- 1. Tailwind CSS IntelliSense 补全+提示
- 2. 加强可读性-headwind （vscode）
- 3. clsx的额外拓展
- 4. tailwind-merge
四、实战可能的问题
- 1. Design tokens 与 Tailwindcss 结合使用
- 2. 动态样式
- 3. 公共样式的复用问题
总结

一、TailwindCss功能展示

相信看了上图+以下效果之后，就了解这个库了，实质就是对于css写法进行优化的库，让开发重点关注html页面编写，不必将关注点切到css文件。
在这里插入图片描述

二、有什么优势？

1. 原子化css+高度定制化

原子化即指单一原则，针对最小单位的css，它只对应一条具体的样式。
而TailwindCSS其实就是一个聚合了很多个原子类的库，提供了大量系统预设类名。
在这里插入图片描述

2. 支持伪类写法

例如hover:、focus:等，效果如下：在这里插入图片描述
而平常使用的内联Style中无法支持 ，也就是 hover: 等状态下的样式，必须在另外的css文件中编写。

3. 强大的响应式

TailwindCSS 提供响应式处理，例如sm:，md:，lg:，实现在不同宽度屏幕下的样式
产物单位会自动转换成rem，当然也可以是其它比如em或者px等。

tailwindcss vs 手写媒体查询
同样是实现多列布局对各个屏幕尺寸大小的适配，左右对比一下，可见优劣

display: grid: 使用grid布局
grid-cols-x：表示每行有x个

在这里插入图片描述
是不是少写很多行代码，懒癌党狂喜~~

对于需要特定数值的样式如宽高、字体大小和边距等，TailwindCSS提供的工具类默认为响应式，如 p-4 实际上是padding: 1rem。而对于特定值可以这样用：p-[12px]，bg-[#fff]。
也可以在配置文件手动预设一些值。

三、相关辅助插件推荐

1. Tailwind CSS IntelliSense 补全+提示

官方给用户贴心地提供了对应的vscode插件，可以快速选择并提示css原用法：

在这里插入图片描述

2. 加强可读性-headwind （vscode）

竖着写
headwind自动排序className

3. clsx的额外拓展

基本拼接：将多个类名直接拼接

import clsx from 'clsx';
const MyComponent = () => {const classes = clsx('class1', 'class2');return <div className={classes}>{'这是一个带有组合类名的元素'}</div>;
};
export default MyComponent;

条件拼接：可根据特定条件动态拼接，默认为true时拼接false时不做拼接

import clsx from 'clsx';
const MyButtonComponent = ({ isActive }) => {const classes = clsx('button', { 'active': isActive });return <button className={classes}>{'这是一个按钮'}</button>;
};
export default MyButtonComponent;

多条件拼接：支持同时拼接多个条件的类名，原理同上

import clsx from 'clsx';
const MyButtonComponent = ({ isActive, isLarge }) => {const classes = clsx('button', {'active': isActive,'large': isLarge});return <button className={classes}>{'这是一个按钮'}</button>;
};
export default MyButtonComponent;

4. tailwind-merge

解决多个原子CSS结合时的冲突，可以清除冗余的类名，只保留最后生效的。

import clsx from 'clsx';
import { twMerge } from 'tailwind-merge'const MyComponent = () => {const classes = twMerge('px-2 py-1 bg-red hover:bg-green', 'p-3 bg-[#ffffff]');return <div className={classes}>{'组合类'}</div>;/*'hover:bg-green p-3 bg-[#ffffff]'*/
};
export default MyComponent;

可与clsx结合使用：twMerge(clsx( ))

四、实战可能的问题

1. Design tokens 与 Tailwindcss 结合使用

design-tokens.json：

{"color": {"primary": "#4f46e5","secondary": "#ec4899"},"spacing": {"small": "8px","medium": "16px","large": "24px"}
}

配置文件tailwindcss.config.js

const designTokens = require('./design-tokens.json');module.exports = {theme: {colors: {primary: designTokens.color.primary,secondary: designTokens.color.secondary},spacing: {sm: designTokens.spacing.small,md: designTokens.spacing.medium,lg: designTokens.spacing.large}}
};

2. 动态样式

控制单条样式
例如用isTrue控制border和py

const Button = ({ isTrue }) => {return (<buttonclassName={`${isTrue ? 'border-[1px]' : 'border-2'}${isTrue ? 'py-1' : 'py-3'}`}>label</button>)
}

失效写法
此时使用变量来控制盒子宽度和字体颜色就会失效了：

const Div = ({ width, color }) => {return <div className={`w-[${width}px] text-${color}`}></div>
}

以上写法暂不支持，样式会失效，是因为TailwindCSS是在构建时按需生成类名以及相应的样式，这种运行时生成的无法被检测到。

正确写法：

const Div = ({ width, color }) => {return <div className="..." style={{ width, color }}></div>
}

3. 公共样式的复用问题

设计初衷：不要过早抽象，相对独立维护

官方的推荐做法
重复多使用jsx+循环，也可以利用代码编辑器快速同时编辑多个className
在这里插入图片描述

总结

tailwindcss：

关注当前页面，不必关注类名
高效处理响应式和伪类
与内联style类似，各样式独立，不必担心复用问题，维护性强

tip:

常用工具类普遍好记，如grid就是 display: gird , relative就是 position: relative ，但是有一些css和tailwindcss写法出入比较大的，比如width，写法 w-[100px]
可以边写边在官方文档ctrl+k查找，基本两遍也就记住了~

前端样式库推广——TailwindCss

官方网址： https://tailwindcss.com/docs/installation/using-vite 中文官方文档：https://www.tailwindcss.cn/ github地址：tailwindcss 正在使用tailwindcss的网站：https://tailwindcss.com/showcase 一看github，竟然…...

编程日记 2025/8/9 11:47:51

【前端 vue 或者麦克风，智能语音识别和播放功能】

前端 vue 或者麦克风，智能语音识别和播放功能 1. 终端安装 npm install recordrtc2.引入 import RecordRTC from recordrtc3.html（根据自己业务更改） <div class"Page"><el-form ref"mainFormRef" class&qu…...

编程日记 2025/8/9 11:41:34

Java基础编程练习第34题-正则表达式

在Java里，正则表达式是一种强大的文本处理工具，它可以用于字符串的搜索、替换、分割和校验等操作。正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。Java通过java.util.regex包提供了对正则表达式的支持。以下是正则表达式在Jav…...

编程日记 2025/8/9 11:42:43

Java+Html实现前后端客服聊天

文章目录核心组件网络通信层事件调度层服务编排层 Spring实现客服聊天技术方案对比WebScoket建立连接用户上线实现指定用户私聊群聊离线 SpringBootWebSocketHtmljQuery实现客服聊天1. 目录结构2. 配置类3. 实体类、service、controller4. ChatWebSocketHandler消息处理5.前端…...

编程日记 2025/8/9 1:11:54

基于Spring Boot的冷链物流系统的设计与实现的设计与实现（LW+源码+讲解）

专注于大学生项目实战开发,讲解,毕业答疑辅导，欢迎高校老师/同行前辈交流合作✌。技术范围：SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。主要内容：…...

编程日记 2025/8/9 11:46:05

《线程池：Linux平台编译线程池动态库发生的死锁问题》

关于如何编译动态库可以移步《Linux：动态库动态链接与静态库静态链接》-CSDN博客我们写的线程池代码是闭源的，未来想提供给别人使用，只需要提供so库和头文件即可。系统默认库文件路径为： usr/lib usr/loacl/lib 系统默认头文件…...

编程日记 2025/8/9 11:35:19

鸿蒙NEXT项目实战-百得知识库03

代码仓地址，大家记得点个star IbestKnowTeach: 百得知识库基于鸿蒙NEXT稳定版实现的一款企业级开发项目案例。本案例涉及到多个鸿蒙相关技术知识点： 1、布局 2、配置文件 3、组件的封装和使用 4、路由的使用 5、请求响应拦截器的封装 6、位置服务 7、三…...

编程日记 2025/8/9 11:41:00

sql server数据迁移，springboot搭建开发环境遇到的问题及解决方案

最近搭建springboot项目开发环境，数据库连的是sql server，遇到许多问题在此记录一下。 1、sql server安装教程参考：https://www.bilibili.com/opus/944736210624970769 2、sql server导出、导入数据库参考：https://blog.csd…...

编程日记 2025/8/8 14:09:38

Sensodrive机器人力控关节模组SensoJoint在海洋垃圾清理机器人中的拓展应用

海洋污染已成为全球性的环境挑战，其中海底垃圾的清理尤为困难。据研究，海洋中约有2600万至6600万吨垃圾，超过90%沉积在海底。传统上，潜水员收集海底垃圾不仅成本高昂，而且充满风险。为解决这一问题，欧盟资助…...

编程日记 2025/8/9 11:39:06

matrix-breakout-2-morpheus 靶机----练习攻略【仅获取shell】

【此练习仅做到反弹shell】 1.靶机下载地址 https://download.vulnhub.com/matrix-breakout/matrix-breakout-2-morpheus.ova 2. 打开靶机，kali使用nmap扫描同C段的主机找到靶机ip 确保靶机和kali网卡均为NAT模式先查看kali的ip nmap 192.168.182.1/24 …...

编程日记 2025/8/9 11:36:58

吴恩达机器学习笔记复盘（八）多元线性回归的梯度下降

简介梯度下降是多元线性回归的主流优化方法，具有普适性和可扩展性，而标准方程法适用于特定场景。实际应用中需结合特征工程和参数调优提升模型性能。本篇不复盘参数调优。 1.多元线性回归模型多元线性回归模型假设因变量与多个自变量之间存在线性…...

编程日记 2025/8/9 11:47:51

SAP-ABAP：采购申请创建（PR）BAPI_PR_CREATE 技术指南-详解

BAPI_PR_CREATE 技术指南用途：通过 RFC 接口创建 SAP 采购申请（PR），支持自动化集成与批量处理。一、功能概览类别说明核心功能创建标准采购申请、预留转采购申请，支持多行项目及账户分配。集成场景与 MRP 系统、外…...

编程日记 2025/8/9 11:41:36

Python：单继承方法的重写

继承：让类和类之间转变为父子关系，子类默认继承父类的属性和方法单继承： class Person:def eat(self):print("eat")def sing(self):print("sing") class Girl(Person):pass#占位符，代码里面类下面不写任何东…...

编程日记 2025/8/9 11:40:59

Cursor解锁Claude Max，助力AI编程新突破！

Cursor 最新推出的 Claude Max 模型，以其卓越的性能和创新的能力，正在重新定义我们对 AI 辅助编程的认知。这款搭载 Claude3.7 大脑的超级模型，不仅具备超强智能，还凭借一系列技术突破，向传统 AI 编程工具发起了挑战。…...

编程日记 2025/8/9 11:36:59

Datawhale coze-ai-assistant 笔记4

课程地址： ‍‌‬‌‬⁠‬‌⁠‍⁠⁠⁠‬第 6 章应用 - 飞书云文档https://zxdwhda-share.feishu.cn/wiki/Gi9aw4EDTiXxcekUWebcEtmUnb4 应用 AI…...

编程日记 2025/8/9 11:42:43

【基于深度学习的验证码识别】---- part3数据加载、模型等API介绍（2）

四、模型模型的定义在机器学习和深度学习中，模型可以定义为： 一个数学函数或算法，能够从输入数据中提取特征并生成输出。通过训练过程，模型能够学习数据中的规律（如分类、回归、聚类等）。训练完成后&…...

编程日记 2025/8/9 11:42:43

留言板

书单作者：郦波《五百年来王阳明》《郦波评说曾国藩家训》《最是人间留不住》《一天一生》作者：曾仕强《论语的生活智慧》《曾仕强详解道德经道经》作者： [何勇，陈晓峰著] 《Greenplum企业应用实战》作者 Mark G. Sobel…...

编程日记 2025/8/9 11:46:30

3.18练习

BUUCTF练习day2 [GXYCTF2019]Ping Ping Ping ping题有点熟悉的命令注入，使用 127.0.0.1;ls可以得到当前目录的文件名 cat一下flag.php，发现不行过滤了空格，那我们有什么方法绕过呢 <(重定向符号)${IFS}$IFS$9%09(tab键) 试一试发现过…...

编程日记 2025/8/8 17:51:58

Redis哨兵模式-黑马学习笔记

redis哨兵模式 1.哨兵主要的作用用于监控主节点的健康情况如果主节点挂掉立马选择一个从节点顶上去 2.监控的机制如何监控呢？ sentinel基于心跳机制检测主节点的状态每个1秒向集群发送ping （三体中逻辑用来威胁三体人的心跳检测） 如…...

编程日记 2025/8/9 1:18:50

Linkreate wordpressAI插件 24小时自动生成原创图文，新增从百度、必应搜索引擎自动获取相关下拉关键词

Linkreate wordpressAI插件核心功能亮点文章生成与优化自动化文章生成：利用 AI 技术，根据关键词生成高质量文章。支持指定长度和要求，异步生成不阻塞操作。且 AI 可自动生成精准的 tag 标签，利于 SEO 优化。批量生成文章…...

编程日记 2025/8/9 11:46:29

《AI赋能云原生区块链，引领供应链溯源革新》

在数字化浪潮席卷全球的当下，供应链管理领域正经历着深刻变革。云原生区块链凭借其去中心化、不可篡改等特性，为供应链溯源带来了前所未有的透明度与可靠性。而AI的融入，更如虎添翼，以强大的智能分析和决策能力，为云原…...

编程日记 2025/8/9 11:46:02

基于单片机的多功能热水器设计(论文+源码)

1系统方案设计基于单片机的多功能热水器系统，其系统框图如图2.1所示。主要采用了DS18B20温度传感器，HC-SR04超声波模块，STC89C52单片机，液晶，继电器等来构成整个系统。硬件上主要通过温度传感器进行水温的检测&am…...

编程日记 2025/8/9 11:35:16

Java面试黄金宝典4

1. 什么是泛型 ？与 T 的区别原理泛型是 Java 编程语言中的一个强大特性，它提供了编译时类型安全检查机制，允许在定义类、接口和方法时使用类型参数。这些类型参数在使用时会被具体的类型所替代，从而实现代码的复用和类型安全。泛…...

编程日记 2025/8/9 11:39:05

vim在连续多行行首插入相同的字符

工作中经常需要用vim注释掉一段代码或者json文件中的一部分，需要在多行前面插入//或者#符号。在 Vim 中，在连续多行行首插入相同字符主要有以下两种方法： Visual Block 模式插入将光标移到要插入相同内容的第一行的行首24。按下Ctrl v进入…...

编程日记 2025/8/9 11:37:00

路径问题（greedy）：地下城游戏

题目描述： 恶魔们抓住了公主并将她关在了地下城 dungeon 的右下角。地下城是由 m x n 个房间组成的二维网格。我们英勇的骑士最初被安置在左上角的房间里，他必须穿过地下城并通过对抗恶魔来拯救公主。骑士的初始健康点数为一个正整数。如果他的健…...

编程日记 2025/8/9 11:40:58

【论文阅读】CARES：医学视觉语言模型可信度的综合基准

CARES：医学视觉语言模型可信度的综合基准 1. 研究背景与动机2. 方法论创新3. 核心实验结果4. 贡献与意义5.总结 CARES: A Comprehensive Benchmark of Trustworthiness in Medical Vision Language Models CARES：医学视觉语言模型可信度的综合基准 Accep…...

编程日记 2025/8/9 11:41:00

Qt窗口坐标体系

坐标系：以左上角为原点（0，0），X向右增加，Y向下增加对于嵌套窗口，其坐标是相对于父窗口来说的例如： 通过move方法实现...

编程日记 2025/8/9 11:46:31

显卡型号显存大小显存频率显存位宽显存带宽CUDA核心数TDP（功耗）上市年份RTX 409024GB21 Gbps384-bit1,008 GB/s16,384450W2022RTX 4080 (16GB)16GB22.4 Gbps256-bit716.8 GB/s9,728320W2022RTX 4080 (12GB)12GB21 Gbps192-bit504 GB/s7,680285W2023RTX 4…...

编程日记 2025/8/9 11:38:43

1.5.3 掌握Scala内建控制结构 - for循环

Scala的for循环功能强大，支持单重和嵌套循环。单重for循环语法为for (变量 <- 集合或数组 (条件)) {语句组}，可选筛选条件，循环变量依次取集合值。支持多种任务，如输出指定范围整数（使用Range、to、until&#xff0…...

编程日记 2025/8/9 11:46:32

10、STL中的unordered_map使用方法

一、了解 1、unordered_map(哈希) unordered_map是借用哈希表实现的关联容器。访问键值对O（1），最坏情况O（n），例如哈希冲突严重时。【n是一个哈希桶的元素数量】 unordered_map特性键值对存储&#xff…...

编程日记 2025/8/9 11:38:42

pycharm-python國際象棋遊戲代碼

嗯，用户的问题是“pycharm寫關於python國際象棋遊戲代碼”，也就是要用PyCharm来写一个Python的国际象棋游戏代码。我需要先整理一下用户提供的搜索结果，看看有什么相关的信息可以利用。首先看搜索结果中的各个网页内容。网页1主要讲的是象棋…...

编程日记 2025/8/9 11:37:00

Linux下Redis哨兵集群模式搭建（1主2从+3哨兵）

Linux下Redis哨兵集群模式搭建（1主2从3哨兵） 一、Redis哨兵模式搭建 1.安装包下载链接: https://pan.baidu.com/s/1_n2rCMi5MHX-mVkkyMo4LA 提取码: gbra 2.新建redis目录 mkdir -p /app/redis3.解压到/app/redis目录下 tar -zxvf redis-6.2.16.ta…...

编程日记 2025/8/9 11:46:31

二.使用ffmpeg对原始音频数据重采样并进行AAC编码

重采样：将音频三元组【采样率采样格式通道数】之中的任何一个或者多个值改变。一.为什么要进行重采样？ 1.原始音频数据和编码器的数据格式不一致 2.播放器要求的和获取的数据不一致 3.方便运算二.本次编码流程 1.了解自己本机麦克风参数&#x…...

编程日记 2025/8/8 15:50:21

【初学者】请介绍一下指针分析（Pointer Analysis）？

李升伟整理指针分析（Pointer Analysis） 指针分析（Pointer Analysis）是一种静态程序分析技术，用于确定程序中指针可能指向的内存位置或对象。它是编译器优化、程序验证、漏洞检测和并行化等领域的重要基础。 1. 指…...

编程日记 2025/8/9 11:42:41

【程序人生】成功人生架构图（分层模型）

文章目录 ⭐前言⭐一、根基层——价值观与使命⭐二、支柱层——健康与能量⭐三、驱动层——学习与进化⭐四、网络层——关系系统⭐五、目标层——成就与财富⭐六、顶层——意义与传承⭐外层：调节环——平衡与抗风险⭐思维导图标题详情作者JosieBook头衔CSDN博客专家…...

编程日记 2025/8/9 11:44:10

目标检测20年（一）

今天看的文献是《Object Detection in 20 Years: A Survey》，非常经典的一篇目标检测文献，希望通过这篇文章学习到目标检测的基础方法并提供一些创新思想。论文链接：1905.05055 目录一、摘要 1.1 原文 1.2 翻译二、介绍三、目标检测…...

编程日记 2025/8/9 11:38:45

SQLMesh系列教程：SQLMesh虚拟数据环境

各种工具都已将软件工程实践引入到数据工程中，但仍有差距存在，尤其是在测试和工作流等领域。SQLMesh 的目标是在这些领域开辟新的天地，解决像 dbt 这样的竞争产品尚未提供强大解决方案的难题。在这篇文章中，我将对 SQLMesh 进行简…...

编程日记 2025/8/8 16:32:15

【python小游戏】扫雷

扫雷小游戏代码。供消遣娱乐： import tkinter as tk from tkinter import messagebox import random# 游戏参数（中等难度：15x15 网格，40 颗雷） ROWS 15 COLS 15 MINES 40 CELL_SIZE 30 COLORS {default: #CCCCCC…...

编程日记 2025/8/9 11:39:07

【Linux】learning notes（4）cat、more、less、head、tail、vi、vim

文章目录 catmore 查看整个文件less 查看整个文件head 查看部分文件tail 查看部分文件vim / vi cat cat 命令在 Linux 和 Unix 系统中非常常用，它用于连接文件并打印到标准输出设备（通常是屏幕）。虽然 cat 的基本用法很简单，但它…...

编程日记 2025/8/3 5:16:06

【论文阅读】Adversarial Patch Attacks on Monocular Depth Estimation Networks

一、背景单目深度估计是CV领域一个比较热门的研究方向，但是现有的方法过度依赖于非深度特征，使得单目深度估计的模型容易受到外界的攻击，针对这一问题该论文设计了一种攻击贴图的方法，用于攻击深度学习实现的单目深度估计模型。…...

编程日记 2025/8/7 14:57:22

基于Flask的自闭症患者诊断辅助系统：助力自闭症诊断

基于Flask的自闭症患者诊断辅助系统：助力自闭症诊断的创新方案在当今社会，自闭症的早期准确诊断对于患者的治疗和康复至关重要。作为项目的第一作者，我致力于开发一款基于Web的自闭症诊断辅助系统，为这一领域贡献一份力量。本…...

编程日记 2025/8/4 8:32:39

SqlServer Sql学习随笔

环境 SqlServerSSMSC# 查询 --查询来自数据库[MyTestDb]的[dbo]的表[testTable]前1000条数据--dbo 代表数据库所有者（Database Owner），在 SQL Server 里，它是一个模式（Schema）。 --**模式（Sc…...

编程日记 2025/8/6 4:56:28

【6】组合计数学习笔记

前言关于今天发现自己连快速幂都忘记怎么写这件事这篇博客是组合计数基础，由于大部分内容都是 6 6 6 级，所以我就给整个提高级的组合数学评了 6 6 6 级。组合计数基础加法原理与乘法原理加法原理（分类计数原理）&#…...

编程日记 2025/8/4 10:22:39

功能安全实战系列06-英飞凌Tricore系列SMU详解

本文框架前言1.What?1.1SMU特性及架构1.1.1 SMU_core和SMU_stdby1.1.2 Flip-Flop机制1.1.3 RT Alarm (RecoveryTime)1.2 Alarm状态机1.3 FSP1.4 Alarm handing1.4.1 SMU_core Alarm handing1.4.2 SMU_Standby Alarm handing1.5 寄存器介绍2.How?2.1 如何排查SMU问题前言在…...

编程日记 2025/8/9 10:22:32

Python 中的集合的中高级用法

Python 中的集合（set）是一种无序且不重复的数据结构，适用于去重、成员检测和集合运算等场景。以下是集合的中级和高级用法，涵盖从基础到高级的详细操作。 1. 集合的创建与初始化 1.1 创建集合 # 空集合 empty_set = set()# 直接初始化 my_set = {1, 2,...

编程日记 2025/7/31 15:41:58

opencv初步学习——图像处理2

这一部分主要讲解如何初步地创建一个图像，以及彩色图像我们的一些基本处理方法一、创建一个灰度图像 1-1、zeros()函数 [NumPy库] 要用到这一个函数，首先我们需要调用我们的NumPy库，这一个函数的作用是可以帮助我们生成一个元素值都是0的二…...

编程日记 2025/8/5 9:07:30

传统服务部署、虚拟化部署与云原生部署资源消耗对比与优化指南

1. 三种部署方式概述 1.1 传统服务部署定义：直接运行于物理服务器或基础Linux操作系统环境，无虚拟化层隔离特点： 资源独占（CPU/内存/磁盘） 部署流程简单但扩展困难典型场景：单一业务高负载场景&…...

编程日记 2025/8/3 1:42:35

使用htool工具导出和导入Excel表

htool官网代码中用到的hool包里面的excel工具ExcelUtil 1. 引入依赖 <dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.8.25</version></dependency>&l…...

编程日记 2025/8/8 12:24:00

【Linux内核】从文件层面理解socket建立的方式（优雅的C风格多态）

内核层面理解 Socket 的创建和连接引言众所周知，Linux 下一切皆文件。无论是普通文件（如 file.txt），还是特殊文件（包括网络套接字），我们都可以以处理文件的方式来访问它们。网络套接字&…...

编程日记 2025/8/3 21:54:21

WebSocket：开启实时通信的新篇章

在当今的互联网应用中，实时交互已经成为不可或缺的一部分。无论是实时的在线聊天、股票行情更新，还是多人在线游戏，都需要一种高效的双向通信机制。而这正是 WebSocket 的用武之地。本文将带你深入了解 WebSocket，探索其工作原理…...

编程日记 2025/8/6 19:44:13

tailwindcss

一、TailwindCss功能展示

二、有什么优势？

1. 原子化css+高度定制化

2. 支持伪类写法

3. 强大的响应式

三、相关辅助插件推荐

1. Tailwind CSS IntelliSense 补全+提示

2. 加强可读性-headwind （vscode）

3. clsx的额外拓展

4. tailwind-merge

四、实战可能的问题

1. Design tokens 与 Tailwindcss 结合使用

2. 动态样式

3. 公共样式的复用问题

总结

相关文章：