Published on2025年8月22日Tailwind CSS 间距与分隔线工具CSSFlexboxLayoutTailwindCSSUtilityFirst本文深度剖析了 Tailwind CSS 中用于处理同级元素间距的 space 和 divide 功能类。内容系统性地阐述了它们基于相邻兄弟选择器的底层 CSS 实现,并通过对比 Flexbox 的 gap 属性,明确了其在不改变父级格式化上下文前提下应用间距的核心优势。
Published on2025年8月21日Tailwind CSS v4 架构CSSFrontendFrontendBuildToolsTailwindCSSUtilityFirst本文深度剖析了 Tailwind CSS v4 的核心架构与工程实践。内容系统性地阐述了其 Utility-First 哲学,并重点解析了 v4 全新的 Rust 内核引擎 (Oxide) 的工作原理——包括其源码扫描、JIT 生成机制,以及对动态类名的处理。笔记还详述了 @theme、@apply 和 @source 等新指令的最佳实践。
Published on2025年8月20日Vite 模块化的高级特性GlobImportHMRJavaScriptModulesTreeShakingVite本文深度剖析了 Vite 中基于 ES 模块的各项高级特性。内容系统性地阐述了 import.meta 对象在访问环境变量 (.env) 和实现热模块替换 (.hot) 中的作用,并重点解析了 Vite 独有的、用于批量导入模块的 import.meta.glob 功能。笔记还涵盖了 JSON 具名导入、条件导入等优化实践。
Published on2025年8月20日Vite 静态资源处理FrontendBuildToolsImageOptimizationPerformanceStaticAssetsVite本文深度剖析了 Vite 中处理静态资源的两种核心模式:通过 public 目录提供未经处理的资源,以及从 src 目录将其作为模块导入以参与构建优化。笔记系统性地阐述了两种方式的底层机制、优缺点及适用场景,并介绍了 assetsInlineLimit、assetsInclude 等高级配置和 vite-imagetool 等优化工具的实践。
Published on2025年8月19日Vite 中的 CSS 工程化实践CSSCSSModulesFrontendBuildToolsPostCSSSassVite本文深度剖析了现代前端构建工具 Vite 中的 CSS 工程化实践。内容系统性地阐述了在 Vite 中引入样式表的三种核心方式及其作用域差异,重点解析了 CSS Modules 实现局部作用域的机制,并详述了 Vite 对 PostCSS 和 Sass/SCSS 等 CSS 预处理器的原生、零配置支持。