[{"data":1,"prerenderedAt":90},["ShallowReactive",2],{"content:\u002Fposts\u002F2025\u002Ftailwindcss-v4-compatibility-processing":3,"surround:\u002Fposts\u002F2025\u002Ftailwindcss-v4-compatibility-processing":78},{"id":4,"title":5,"body":6,"canonical":53,"categories":54,"date":56,"description":57,"draft":58,"extension":59,"image":60,"meta":61,"navigation":62,"path":63,"permalink":53,"readingTime":64,"recommend":53,"references":53,"seo":69,"sitemap":70,"stem":71,"tags":72,"type":53,"updated":56,"__hash__":77},"content\u002Fposts\u002F2025\u002Ftailwindcss-v4-compatibility-processing.md","tailwindcss-v4 兼容性处理",{"type":7,"value":8,"toc":50},"minimark",[9,13,16,33,36,47],[10,11,12],"p",{},"tailwindcss v4 版本使用了 OKLCH 色彩空间，旧版的浏览器兼容性不是很好，如何解决这个问题呢？",[10,14,15],{},"我们可以下载两个插件来缓解这个问题：",[17,18,19,27],"ul",{},[20,21,22,26],"li",{},[23,24,25],"code",{"code":25},"@csstools\u002Fpostcss-oklab-function","：做 OKLCH 色彩空间转换",[20,28,29,32],{},[23,30,31],{"code":31},"postcss-nesting","：允许您将样式规则嵌套在一起",[10,34,35],{},"在 vite 中使用：",[37,38,45],"pre",{"className":39,"code":41,"filename":42,"language":43,"meta":44},[40],"language-ts","import postcssOKLabFunction from '@csstools\u002Fpostcss-oklab-function'\nimport postcssNesting from 'postcss-nesting'\nimport { defineConfig } from 'vite'\n\nexport default defineConfig({\n    css: {\n        postcss: {\n            plugins: [\n                postcssOKLabFunction(),\n                postcssNesting(),\n            ],\n        },\n    },\n})\n","vite.config.ts","ts","",[23,46,41],{"__ignoreMap":44},[10,48,49],{},"这样可以解决大部分因为色彩空间不兼容导致的颜色渲染不出来的问题。",{"title":44,"searchDepth":51,"depth":51,"links":52},4,[],null,[55],"代码","2025-06-07 19:28:44","tailwindcss v4版本使用了 OKLCH 色彩空间，旧版的浏览器兼容性不是很好，如何解决这个问题呢？",false,"md","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002Ftailwindcss-v4-OKLCH-postcss.png",{},true,"\u002Fposts\u002F2025\u002Ftailwindcss-v4-compatibility-processing",{"text":65,"minutes":66,"time":67,"words":68},"1 min read",0.685,41100,137,{"title":5,"description":57},{"loc":63},"posts\u002F2025\u002Ftailwindcss-v4-compatibility-processing",[73,74,75,76],"tailwindcss","兼容性","postcss","vite","ASCaIl254Rrmt5k9cXd5TAYNeQzzA9YugOu3IE7B-mc",[79,85],{"title":80,"path":81,"stem":82,"date":83,"type":84,"children":-1},"shadcn-vue-admin 100星留念","\u002Fposts\u002F2025\u002Fshadcn-vue-admin-100-star","posts\u002F2025\u002Fshadcn-vue-admin-100-star","2025-06-07 12:18:16","story",{"title":86,"path":87,"stem":88,"date":89,"type":53,"children":-1},"如何使用 Vue Router 的类型化路由","\u002Fposts\u002F2025\u002Fhow-use-typed-vue-router","posts\u002F2025\u002Fhow-use-typed-vue-router","2025-06-12 16:23:42",1789642589377]