[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"public:announcements":3,"public:navigations:zh":4,"footer:categories:zh":56,"post:detail:post-29-TailwindC:zh":177},[],[5,18,25,33,41,49],{"id":6,"title":7,"url":12,"icon":13,"parent_id":13,"location":14,"order":6,"is_active":15,"target_blank":16,"created_at":17,"updated_at":13},1,{"zh":8,"en":9,"ja":10,"zh_TW":11},"首页","Home","ホーム","首頁","\u002F",null,"header",true,false,"2026-09-30T18:09:54.251095Z",{"id":19,"title":20,"url":24,"icon":13,"parent_id":13,"location":14,"order":19,"is_active":15,"target_blank":16,"created_at":17,"updated_at":13},2,{"zh":21,"en":22,"ja":23,"zh_TW":21},"文章","Posts","記事","\u002Fposts",{"id":26,"title":27,"url":32,"icon":13,"parent_id":13,"location":14,"order":26,"is_active":15,"target_blank":16,"created_at":17,"updated_at":13},3,{"zh":28,"en":29,"ja":30,"zh_TW":31},"分类","Categories","カテゴリー","分類","\u002Fcategories",{"id":34,"title":35,"url":40,"icon":13,"parent_id":13,"location":14,"order":34,"is_active":15,"target_blank":16,"created_at":17,"updated_at":13},4,{"zh":36,"en":37,"ja":38,"zh_TW":39},"标签","Tags","タグ","標籤","\u002Ftags",{"id":42,"title":43,"url":48,"icon":13,"parent_id":13,"location":14,"order":42,"is_active":15,"target_blank":16,"created_at":17,"updated_at":13},5,{"zh":44,"en":45,"ja":46,"zh_TW":47},"关于","About","概要","關於","\u002Fpage\u002Fabout",{"id":50,"title":51,"url":55,"icon":13,"parent_id":13,"location":14,"order":50,"is_active":15,"target_blank":16,"created_at":17,"updated_at":13},6,{"zh":52,"en":53,"ja":54,"zh_TW":52},"留言板","Guestbook","ゲストブック","\u002Fpage\u002Fguestbook",[57,73,87,102,117,133,148,162],{"id":6,"name":58,"slug":63,"description":64,"icon":69,"color":70,"cover_image":13,"created_at":71,"post_count":72},{"en":59,"ja":60,"zh":61,"zh_Hant":62},"Technology","テクノロジー","技术","技術","technology",{"en":65,"ja":66,"zh":67,"zh_Hant":68},"Cutting-edge technology exploration and in-depth analysis covering programming languages, frameworks, and architecture design","プログラミング言語、フレームワーク、アーキテクチャ設計を含む先端技術の探究","前沿技术探索与深度分析，涵盖编程语言、框架、架构设计等核心领域","前沿技術探索與深度分析，涵蓋編程語言、框架、架構設計等核心領域","heroicons:cog-6-tooth","#6366f1","2026-09-30T18:09:53.633610Z",8,{"id":19,"name":74,"slug":78,"description":79,"icon":84,"color":85,"cover_image":13,"created_at":86,"post_count":50},{"en":75,"ja":76,"zh":77,"zh_Hant":77},"Tutorial","チュートリアル","教程","tutorial",{"en":80,"ja":81,"zh":82,"zh_Hant":83},"Hands-on tutorials from scratch with clear steps and complete code for developers at all levels","ゼロから始める実践的なチュートリアル。明確な手順と完全なコードで、全てのレベルの開発者に最適","从零开始的实战教程，步骤清晰，代码完整，适合各阶段开发者学习","從零開始的實戰教程，步驟清晰，代碼完整，適合各階段開發者學習","heroicons:academic-cap","#10b981","2026-09-30T18:09:53.641581Z",{"id":26,"name":88,"slug":92,"description":93,"icon":98,"color":99,"cover_image":13,"created_at":100,"post_count":101},{"en":89,"ja":90,"zh":91,"zh_Hant":91},"Frontend","フロントエンド","前端","frontend",{"en":94,"ja":95,"zh":96,"zh_Hant":97},"Full coverage of web frontend development including Vue, React, new CSS features, and performance optimization","Vue、React、CSSの新機能やパフォーマンス最適化を含むWebフロントエンド開発の全領域","Web前端开发全栈覆盖，包括Vue、React、CSS新特性及性能优化等话题","Web前端開發全棧覆蓋，包括Vue、React、CSS新特性及性能優化等話題","heroicons:computer-desktop","#ec4899","2026-09-30T18:09:53.644838Z",7,{"id":34,"name":103,"slug":108,"description":109,"icon":114,"color":115,"cover_image":13,"created_at":116,"post_count":26},{"en":104,"ja":105,"zh":106,"zh_Hant":107},"Backend","バックエンド","后端","後端","backend",{"en":110,"ja":111,"zh":112,"zh_Hant":113},"Server-side development best practices including API design, database optimization, and microservices architecture","API設計、データベース最適化、マイクロサービスアーキテクチャを含むサーバーサイド開発の実践","服务端开发实战经验，API设计、数据库优化、微服务架构等深度内容","服務端開發實戰經驗，API設計、數據庫優化、微服務架構等深度內容","heroicons:server-stack","#f59e0b","2026-09-30T18:09:53.647836Z",{"id":42,"name":118,"slug":123,"description":124,"icon":129,"color":130,"cover_image":13,"created_at":131,"post_count":132},{"en":119,"ja":120,"zh":121,"zh_Hant":122},"Fullstack","フルスタック","全栈","全棧","fullstack",{"en":125,"ja":126,"zh":127,"zh_Hant":128},"End-to-end development guides covering the full project lifecycle and technology stack selection","フロントエンドからバックエンドまでの開発プロセス全体をカバーするガイド","从前端到后端的全流程开发指南，覆盖完整项目生命周期与技术选型","從前端到後端的全流程開發指南，覆蓋完整項目生命週期與技術選型","heroicons:swatch","#8b5cf6","2026-09-30T18:09:53.650513Z",0,{"id":50,"name":134,"slug":139,"description":140,"icon":145,"color":146,"cover_image":13,"created_at":147,"post_count":34},{"en":135,"ja":136,"zh":137,"zh_Hant":138},"Essays","エッセイ","随笔","隨筆","essays",{"en":141,"ja":142,"zh":143,"zh_Hant":144},"Technical reflections and development insights recording the programmer's growth journey","プログラマーの成長の軌跡を記録する技術的考察と開発の洞察","技术思考与开发心得分享，记录程序员成长路上的点滴感悟","技術思考與開發心得分享，記錄程序員成長路上的點滴感悟","heroicons:pencil-square","#f43f5e","2026-09-30T18:09:53.653105Z",{"id":101,"name":149,"slug":153,"description":154,"icon":159,"color":160,"cover_image":13,"created_at":161,"post_count":34},{"en":150,"ja":151,"zh":152,"zh_Hant":152},"Tools","ツール","工具","tools",{"en":155,"ja":156,"zh":157,"zh_Hant":158},"Development toolchain and productivity tool recommendations to supercharge your development experience","開発効率を飛躍的に向上させるツールチェーンと生産性ツールの推奨","开发工具链与效率提升利器推荐，让你的开发体验如虎添翼","開發工具鏈與效率提升利器推薦，讓你的開發體驗如虎添翼","heroicons:wrench-screwdriver","#06b6d4","2026-09-30T18:09:53.655605Z",{"id":72,"name":163,"slug":168,"description":169,"icon":174,"color":175,"cover_image":13,"created_at":176,"post_count":132},{"en":164,"ja":165,"zh":166,"zh_Hant":167},"Translation","翻訳","翻译","翻譯","translation",{"en":170,"ja":171,"zh":172,"zh_Hant":173},"Curated translations of high-quality foreign technical articles to keep up with international trends","国際的な技術トレンドを追うための厳選された海外技術記事の翻訳","优质外文技术文章精选翻译，紧跟国际技术前沿动态","優質外文技術文章精選翻譯，緊跟國際技術前沿動態","heroicons:language","#84cc16","2026-09-30T18:09:53.658041Z",{"id":178,"title":179,"subtitle":13,"slug":180,"source":181,"source_url":13,"audio":13,"video":13,"video_url":13,"content":182,"excerpt":183,"cover_image":13,"author":184,"category":187,"tags":188,"status":210,"visibility":211,"password":13,"views":212,"likes_count":132,"is_pinned":16,"allow_comments":15,"comments_count":213,"is_password_protected":16,"meta_title":179,"meta_description":183,"meta_keywords":214,"created_at":215,"published_at":215,"updated_at":216,"reading_time":6},29,"Tailwind CSS v4 新特性：Zero-config + CSS-native 变量","post-29-TailwindC","原创","# Tailwind CSS v4 新特性：Zero-config + CSS-native 变量\n\nTailwind CSS v4 是 2024 年底发布的架构级重写，最大变化是\"回归 CSS 本身\"：以前 tailwind.config.js 的所有能力现在都能用原生 CSS 的 @theme 和 CSS 变量实现，配合 oxc 引擎比 v3 快 10-40 倍。\n\n## 零配置与 @theme 设计令牌\n\n彻底删除 tailwind.config.js。入口文件只需要一行 @import \"tailwindcss\"；所有主题令牌（颜色、字体、阴影、间距、动画）在同个 CSS 文件用 @theme 块声明，和 CSS 自定义属性语法完全一致。Next.js\u002FVite 无需 postcss.config 即可生效，新手上手门槛降低 50%。\n\n```css\n```vue\n\u002F** @type {import('tailwindcss').Config} 以前 tailwind.config.js 写法现在不要了 **\u002F\n\u002F* ====== app.css v4 新写法：零配置 @theme 块 ====== *\u002F\n@import \"tailwindcss\";\n\n@theme {\n  --color-brand-50: #effaf5;\n  --color-brand-100: #d9f2e5;\n  --color-brand-500: #11a97a;\n  --color-brand-600: #0e8a63;\n  --color-surface: #0b0d12;\n  --color-muted: color-mix(in oklab, var(--color-surface), white 65%);\n\n  --font-sans: \"Inter\", \"PingFang SC\", \"Noto Sans JP\", ui-sans-serif, system-ui, sans-serif;\n  --font-mono: \"JetBrains Mono\", ui-monospace, monospace;\n\n  --radius-sm: 0.25rem;\n  --radius-md: 0.5rem;\n  --radius-xl: 1.5rem;\n  --radius-2xl: 2rem;\n\n  --shadow-card: 0 1px 2px rgba(0,0,0,0.04), 0 12px 32px -16px rgba(0,0,0,0.25);\n  --shadow-glow: 0 0 0 1px color-mix(in oklab, var(--color-brand-500), transparent 70%),\n                 0 0 32px -8px color-mix(in oklab, var(--color-brand-500), transparent 40%);\n\n  --spacing-18: 4.5rem;\n  --spacing-88: 22rem;\n  --spacing-128: 32rem;\n\n  --animate-float: float 6s ease-in-out infinite;\n  --animate-shimmer: shimmer 2s linear infinite;\n}\n\n@keyframes float {\n  0%, 100% { transform: translateY(0); }\n  50% { transform: translateY(-10px); }\n}\n@keyframes shimmer {\n  from { background-position: -200% 0; }\n  to   { background-position: 200% 0; }\n}\n\n@layer utilities {\n  .text-balance { text-wrap: balance; }\n  .bg-grid {\n    background-image: linear-gradient(currentColor 1px, transparent 1px),\n                      linear-gradient(90deg, currentColor 1px, transparent 1px);\n    background-size: 24px 24px;\n  }\n  .mask-fade-b {\n    mask-image: linear-gradient(to bottom, black 60%, transparent);\n  }\n}\n\n\u002F* 媒体查询 & 容器查询 v4 原生支持 *\u002F\n@container card (min-width: 420px) {\n  .card-title { font-size: 1.5rem; }\n}\n@media (prefers-color-scheme: dark) {\n  :root { color-scheme: dark; }\n}\n\n\u002F* ====== 业务组件中使用 ====== *\u002F\n.card {\n  @apply bg-white dark:bg-zinc-900\u002F60 backdrop-blur-md rounded-2xl shadow-card p-8 transition-all duration-300;\n}\n.card:hover {\n  @apply shadow-glow -translate-y-1;\n}\n\n\u002F* ====== nextjs app router 入口 ====== *\u002F\n\u002F\u002F app\u002Fglobals.css 首行导入即可，不需要 tailwind.config.js\n\u002F\u002F tailwindcss v4 依赖：npm i tailwindcss @tailwindcss\u002Fnext\n\u002F\u002F next.config.mjs:\nimport createMDX from \"@next\u002Fmdx\";\nimport tailwindcss from \"@tailwindcss\u002Fnext\";\n\n\u002F** @type {import('next').NextConfig} *\u002F\nconst nextConfig = {\n  experimental: { optimizePackageImports: [\"shiki\", \"@shikijs\u002Frehype\"] },\n};\n\nexport default tailwindcss(createMDX()(nextConfig));\n\n\u002F\u002F React 组件里直接用新的工具类\nexport function PricingCard({ tier }: { tier: \"pro\" | \"enterprise\" }) {\n  const highlight = tier === \"enterprise\" ? \"ring-2 ring-brand-500\u002F40\" : \"\";\n  return (\n    \u003Carticle className={`card ${highlight} @lg:flex-row`}>\n      \u003Ch3 className=\"card-title text-2xl font-semibold tracking-tight text-balance\">\n        {tier === \"enterprise\" ? (\n          \u003Cspan className=\"bg-gradient-to-r from-brand-500 to-brand-300 bg-clip-text text-transparent\">\n            Enterprise\n          \u003C\u002Fspan>\n        ) : \"Pro Plan\"}\n      \u003C\u002Fh3>\n      \u003Cdiv className=\"mt-6 space-y-4 text-sm text-zinc-600 dark:text-zinc-300\">\n        \u003CFeature text=\"SSO SAML \u002F SCIM provisioning\" \u002F>\n        \u003CFeature text=\"99.99% uptime SLA\" \u002F>\n        \u003CFeature text=\"Dedicated CSM\" \u002F>\n      \u003C\u002Fdiv>\n    \u003C\u002Farticle>\n  );\n}\n```\n```\n\n## 内置 oxc 引擎 & 容器查询 & @layer utilities\n\n新编译器 oxc 用 Rust 写，10k 文件项目构建从 8s 降到 300ms。@media 媒体查询、@container 容器查询、@property、color-mix 都是一等公民支持，无需插件。@layer utilities 定义项目专属工具类，和官方工具类一起参与 JIT 排序与 purge。\n\n| 维度 | Tailwind CSS v3 | Tailwind CSS v4 |\n|------|----------------|----------------|\n| 配置文件 | tailwind.config.js（TypeScript） | 零配置，CSS @theme 块 |\n| 编译器 | PostCSS + js | oxc (Rust) 10-40x |\n| CSS 原生特性 | 部分通过插件 | @property \u002F container \u002F color-mix 全支持 |\n| 设计令牌来源 | config.theme + preset 合并 | 纯 CSS 变量，浏览器原生可覆盖 |\n| 框架集成 | postcss.config 必配 | @tailwindcss\u002Fnext \u002F @tailwindcss\u002Fvite 零配置 |\n\n## 最佳实践\n\n沿用 v3 的 JIT 命名习惯但迁移配置到 @theme。旧项目用官方升级工具 npx @tailwindcss\u002Fupgrade 一键迁移。不要混用 @apply 超过 5 个类，复杂样式直接写原生 CSS 配合 theme() 函数取值。","Tailwind CSS v4 是一次架构级升级：彻底抛弃 tailwind.config.js，用 @theme 块在原生 CSS 文件声明设计令牌；新增 @import \"tailwindcss\" 单入口代替 postcss.config；内置 CSS 变量、容器查询原生支持、oxc 引擎提速 10-40 倍、颜色函数简化。",{"id":6,"username":185,"nickname":185,"avatar":13,"cover_image":13,"bio":13,"website":13,"github":13,"avatar_source":13,"resolved_avatar_url":13,"title":13,"created_at":186},"Choyeon","2026-09-30T18:09:53.330367Z",{"id":26,"name":91,"slug":92,"description":96,"icon":98,"color":99,"cover_image":13,"created_at":100,"post_count":132},[189,194,199,204],{"id":26,"name":190,"slug":191,"color":192,"icon":13,"is_active":15,"created_at":193,"post_count":132},"Vue","vue","#42b883","2026-09-30T18:09:53.672512Z",{"id":34,"name":195,"slug":196,"color":197,"icon":13,"is_active":15,"created_at":198,"post_count":132},"React","react","#61dafb","2026-09-30T18:09:53.675301Z",{"id":50,"name":200,"slug":201,"color":202,"icon":13,"is_active":15,"created_at":203,"post_count":132},"TypeScript","typescript","#3178c6","2026-09-30T18:09:53.680697Z",{"id":205,"name":206,"slug":207,"color":208,"icon":13,"is_active":15,"created_at":209,"post_count":132},14,"CSS","css","#1572b6","2026-09-30T18:09:53.704077Z","published","public",344,10,"CSS,TypeScript,React,Vue","2026-09-26T09:09:53.733462Z","2026-10-01T13:34:45.903959Z"]