{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/ecosystem/tailwind","result":{"data":{"current":{"frontmatter":{"title":"Tailwind 搭配使用","order":13,"brief":"更优雅地使用 TailwindCSS 与 Semi","icon":"doc-tailwind"},"fields":{"type":"ecosystem"},"tableOfContents":{"items":[{"url":"#注意","title":"注意","items":[{"items":[{"url":"#1-解决样式覆盖优先级问题","title":"1. 解决样式覆盖优先级问题","items":[{"url":"#问题表现","title":"问题表现"},{"url":"#原因分析","title":"原因分析"},{"url":"#解决方案","title":"解决方案"},{"url":"#原理","title":"原理"}]},{"url":"#2解决在-tailwind-原子类中使用-semi-token-的问题-可选","title":"2.解决在 Tailwind 原子类中使用 Semi Token 的问题 (可选)"}]}]}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"category\": \"生态与帮助\",\n  \"title\": \"Tailwind 搭配使用\",\n  \"icon\": \"doc-tailwind\",\n  \"localeCode\": \"zh-CN\",\n  \"order\": 13,\n  \"brief\": \"更优雅地使用 TailwindCSS 与 Semi\"\n};\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\nvar Notice = makeShortcode(\"Notice\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"\\u6CE8\\u610F\"), mdx(\"br\", null), mdx(\"p\", null, \"\\u672C\\u9875\\u5C06\\u63D0\\u4F9B TailwindCSS (\\u652F\\u6301 v3 \\u548C v4) \\u7B49\\u539F\\u5B50\\u7C7B\\u6837\\u5F0F\\u5E93\\u4E0E Semi \\u5171\\u540C\\u4F7F\\u7528\\u65F6\\u9047\\u5230\\u7684\\u4E00\\u4E9B\\u95EE\\u9898\\u7684\\u6700\\u4F73\\u5B9E\\u8DF5\\u3002\"), mdx(\"p\", null, \"\\u8FD9\\u4E9B\\u95EE\\u9898\\u5728\\u5176\\u4ED6\\u7EC4\\u4EF6\\u5E93\\u4E0E Tailwind \\u5171\\u540C\\u4F7F\\u7528\\u65F6\\u5019\\u4E5F\\u4F1A\\u7ECF\\u5E38\\u9047\\u5230\\uFF0C\\u4F46 Semi \\u63D0\\u4F9B\\u4E86\\u5B98\\u65B9\\u89E3\\u51B3\\u65B9\\u6848\\uFF0C\\u5EFA\\u8BAE\\u6309\\u7167\\u672C\\u6587\\u8BF4\\u660E\\uFF0C\\u6B63\\u786E\\u914D\\u7F6E\\u9879\\u76EE\\u3002\"), mdx(Notice, {\n    title: \"\\u6CE8\\u610F\",\n    mdxType: \"Notice\"\n  }, \"Semi \\u4E0D\\u4F9D\\u8D56\\u4EFB\\u4F55\\u7B2C\\u4E09\\u65B9\\u6837\\u5F0F\\u5E93\\uFF0C\\u6CA1\\u6709\\u5B89\\u88C5 Tailwind \\u4E00\\u6837\\u53EF\\u4EE5\\u8FD0\\u884C\\uFF0C\\u5982\\u679C\\u4F60\\u6CA1\\u6709\\u4F7F\\u7528 Tailwind \\u7B49\\u539F\\u5B50\\u7C7B\\u5E93\\uFF0C\\u53EF\\u5FFD\\u7565\\u4EE5\\u4E0B\\u5185\\u5BB9\"), mdx(\"h3\", null, \"1. \\u89E3\\u51B3\\u6837\\u5F0F\\u8986\\u76D6\\u4F18\\u5148\\u7EA7\\u95EE\\u9898\"), mdx(\"h4\", null, \"\\u95EE\\u9898\\u8868\\u73B0\"), mdx(\"p\", null, \"\\u5728\\u7EC4\\u4EF6\\u4E2D\\u4F7F\\u7528\\u90E8\\u5206\\u539F\\u5B50\\u7C7B\\u65F6\\u6CA1\\u6709\\u6548\\u679C \\u6216 \\u7EC4\\u4EF6\\u5E93\\u6837\\u5F0F\\u5F02\\u5E38\\u3002\"), mdx(\"h4\", null, \"\\u539F\\u56E0\\u5206\\u6790\"), mdx(\"p\", null, \"\\u4F7F\\u7528 Tailwind \\u65F6\\uFF0CTailwind \\u901A\\u8FC7 className \\u5BF9 dom \\u8FDB\\u884C\\u6837\\u5F0F\\u4FEE\\u6539\\uFF0C\\u540C\\u6837\\u4F5C\\u7528\\u4E8E Semi \\u7EC4\\u4EF6\\u5E93\\u3002\\u540C\\u65F6 Tailwind \\u9ED8\\u8BA4\\u5F00\\u542F\\u4E86 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://tailwindcss.com/docs/preflight\"\n  }, \"Preflight\"), \" \\u6765\\u91CD\\u7F6E\\u6D4F\\u89C8\\u5668\\u9ED8\\u8BA4\\u6837\\u5F0F\\u3002\"), mdx(\"p\", null, \"\\u6B64\\u65F6\\u6839\\u636E\\u4F60\\u9879\\u76EE\\u7684\\u914D\\u7F6E\\u548C\\u5165\\u53E3\\u7684 import\\uFF0C\\u6709\\u4E24\\u79CD\\u53EF\\u80FD\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Tailwind \\u6BD4 Semi \\u7684\\u6837\\u5F0F\\u5148\\u5F15\\u5165\\uFF0CSemi \\u4F18\\u5148\\u7EA7\\u66F4\\u9AD8\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Semi \\u6837\\u5F0F \\u6BD4 Tailwind \\u5148\\u5F15\\u5165\\uFF0CTailwind \\u4F18\\u5148\\u7EA7\\u66F4\\u9AD8\")), mdx(\"p\", null, \"\\u5982\\u679C\\u662F 1\\uFF0C\\u5219\\u4F1A\\u51FA\\u73B0 Tailwind \\u5728\\u6DFB\\u52A0\\u67D0\\u4E9B\\u539F\\u5B50\\u7C7B\\u65F6\\uFF0C\\u5982\\u679C\\u7EC4\\u4EF6\\u6837\\u5F0F\\u5DF2\\u7ECF\\u5B9A\\u4E49\\u4E86\\u67D0\\u4E2A css \\u5C5E\\u6027\\uFF0C\\u539F\\u5B50\\u7C7B\\u7684\\u4F18\\u5148\\u7EA7\\u6BD4 Semi \\u4F18\\u5148\\u7EA7\\u4F4E\\uFF0C\\u6B64\\u65F6\\u539F\\u5B50\\u7C7B\\u5931\\u6548\\u3002\\n\\u4F8B\\u5982\\u5728 1 \\u7684\\u524D\\u63D0\\u4E0B\\uFF0C\\u5BF9 Button \\u7EC4\\u4EF6\\u8BBE\\u7F6E padding\\uFF0C\\u4F1A\\u51FA\\u73B0\\u5931\\u6548\\u7684\\u60C5\\u51B5\\u3002\"), mdx(\"p\", null, \"\\u5982\\u679C\\u662F 2\\uFF0C\\u56E0\\u4E3A Tailwind \\u4F18\\u5148\\u7EA7\\u8F83\\u9AD8\\uFF0C\\u5176\\u5BF9\\u6D4F\\u89C8\\u5668\\u9ED8\\u8BA4\\u6837\\u5F0F\\u8986\\u76D6\\u7684 Preflight \\u4F1A\\u540C\\u65F6\\u8986\\u76D6\\u6389 Semi \\u7684\\u6837\\u5F0F\\u3002\\n\\u4F8B\\u5982\\u5728 2 \\u7684\\u524D\\u63D0\\u4E0B\\uFF0Clight \\u7684 Button \\u7684\\u80CC\\u666F\\u8272\\u4F1A\\u88AB\\u8986\\u76D6\\u4E3A transparent\\uFF0C\\u5BFC\\u81F4\\u6837\\u5F0F\\u8868\\u73B0\\u5F02\\u5E38\\u3002\"), mdx(\"h4\", null, \"\\u89E3\\u51B3\\u65B9\\u6848\"), mdx(\"p\", null, \"\\u65E0\\u8BBA Tailwind \\u548C \\u7EC4\\u4EF6\\u5E93\\u54EA\\u4E00\\u65B9\\u4F18\\u5148\\u7EA7\\u9AD8\\uFF0C\\u90FD\\u4F1A\\u51FA\\u73B0\\u95EE\\u9898\\uFF0C\\u56E0\\u6B64\\u89E3\\u51B3\\u65B9\\u5F0F\\u5728\\u4E8E\\u6B63\\u786E\\u5904\\u7406 Tailwind \\u6837\\u5F0F\\u4E2D Preflight \\u548C\\u7528\\u6237\\u9700\\u8981\\u7684\\u539F\\u5B50\\u7C7B\\u7684\\u4F18\\u5148\\u7EA7\\u76F8\\u5BF9\\u4E8E\\u7EC4\\u4EF6\\u5E93\\u4F18\\u5148\\u7EA7\\u7684\\u5173\\u7CFB\\u3002\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \" 1. \\u5F00\\u542F Semi \\u63D2\\u4EF6 (>= 2.59.0) \")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-shell\"\n  }, \"yarn add -D @douyinfe/semi-webpack-plugin\\n\")), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \" 2. \\u5728\\u9879\\u76EE\\u4E2D\\u7684\\u914D\\u7F6E\\u6587\\u4EF6\\u4E2D \")), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"webpack \\u7528\\u6237\\uFF1A\\u5728 webpack.config.js \\u5F15\\u5165 Semi webpack \\u63D2\\u4EF6\\u5E76\\u5F00\\u542F cssLayer\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"const SemiPlugin = require('@douyinfe/semi-webpack-plugin').default;\\n\\nmodule.exports = {\\n    // ...\\n    plugins: [\\n        new SemiPlugin({\\n            cssLayer:true,\\n            /* ...options */\\n        })\\n    ]\\n    // ...\\n};\\n\\n\")), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"rspack \\u7528\\u6237\\uFF1A\\u5728 rspack.config.js  \\u5F15\\u5165 Semi webpack \\u63D2\\u4EF6\\u5E76\\u5F00\\u542F cssLayer\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"const {SemiRspackPlugin} = require('@douyinfe/semi-rspack-plugin');\\n\\nmodule.exports = {\\n    // ...\\n    plugins: [\\n        new SemiRspackPlugin({\\n            cssLayer:true\\n        })\\n    ]\\n};\\n\")), mdx(\"p\", null, \"\\u4F7F\\u7528\\u975E webpack rspack \\u6784\\u5EFA\\u7684\\u7528\\u6237\\u8BF7\\u53C2\\u7167\\u539F\\u7406\\u81EA\\u884C\\u5BF9 semi \\u7684 css \\u8FDB\\u884C layer \\u5305\\u88F9\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \" 3. \\u4FEE\\u6539 Tailwind \\u5165\\u53E3\\u914D\\u7F6E\")), mdx(Notice, {\n    title: \"\\u9009\\u62E9\\u4F60\\u7684 Tailwind \\u7248\\u672C\",\n    mdxType: \"Notice\"\n  }, \"Tailwind v3 \\u548C v4 \\u7684\\u914D\\u7F6E\\u65B9\\u5F0F\\u4E0D\\u540C\\uFF0C\\u8BF7\\u6839\\u636E\\u4F60\\u4F7F\\u7528\\u7684\\u7248\\u672C\\u9009\\u62E9\\u5BF9\\u5E94\\u7684\\u914D\\u7F6E\\u65B9\\u5F0F\\u3002\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Tailwind v4 \\u914D\\u7F6E\\u65B9\\u5F0F\\uFF1A\")), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u521B\\u5EFA\\u4E00\\u4E2A CSS \\u6587\\u4EF6\\uFF08\\u5982 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"semi-layer.css\"), \"\\uFF09\\uFF0C\\u5185\\u5BB9\\u5982\\u4E0B\\uFF1A\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\"\n  }, \"@layer theme, base, semi, utilities;\\n\")), mdx(\"ol\", {\n    \"start\": 2\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5728\\u9879\\u76EE\\u7684 JS \\u5165\\u53E3\\u6587\\u4EF6\\uFF08\\u5982 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"main.tsx\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"App.tsx\"), \" \\u6216 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"index.js\"), \"\\uFF09\\u7684\", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u6700\\u9876\\u90E8\"), \"\\uFF0C\\u5728\\u6240\\u6709\\u5176\\u4ED6 import \\u8BED\\u53E5\\u4E4B\\u524D\\uFF0Cimport \\u8FD9\\u4E2A\\u6587\\u4EF6\\uFF1A\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"// main.tsx \\u6216 index.js - \\u5FC5\\u987B\\u653E\\u5728\\u6700\\u9876\\u90E8\\nimport './semi-layer.css';  // \\u5FC5\\u987B\\u5728\\u6700\\u524D\\u9762\\nimport './tailwind.css';    // \\u5305\\u542B @import \\\"tailwindcss\\\"; \\u7684\\u6587\\u4EF6\\nimport { Button } from '@douyinfe/semi-ui';\\n// ... \\u5176\\u4ED6 import\\n\")), mdx(Notice, {\n    type: \"warning\",\n    title: \"\\u91CD\\u8981\",\n    mdxType: \"Notice\"\n  }, \"`semi-layer.css` \\u5FC5\\u987B\\u5728\\u4EFB\\u4F55\\u5305\\u542B `@import \\\"tailwindcss\\\";` \\u7684 CSS \\u6587\\u4EF6\\u548C\\u4EFB\\u4F55 Semi \\u7EC4\\u4EF6\\u7684 import \\u4E4B\\u524D\\u5F15\\u5165\\uFF0C\\u5426\\u5219 CSS Layer \\u987A\\u5E8F\\u5C06\\u4E0D\\u6B63\\u786E\\u3002\\u5EFA\\u8BAE\\u5C06\\u5176\\u653E\\u5728\\u5165\\u53E3\\u6587\\u4EF6\\u7684\\u7B2C\\u4E00\\u884C\\u3002\"), mdx(\"hr\", null), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Tailwind v3 \\u914D\\u7F6E\\u65B9\\u5F0F\\uFF1A\")), mdx(\"p\", null, \"Tailwind v3 \\u5165\\u53E3\\u7684 CSS \\u901A\\u5E38\\u662F\\u5305\\u542B\\u4E86\\u4E0B\\u9762\\u4E09\\u884C\\u7684\\u6587\\u4EF6\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\"\n  }, \"@tailwind base;\\n@tailwind components;\\n@tailwind utilities;\\n\")), mdx(\"p\", null, \"\\u5C06\\u5176\\u4FEE\\u6539\\u4E3A\\uFF08\\u76F4\\u63A5\\u590D\\u5236\\uFF09\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\"\n  }, \"@layer tailwind-base,semi,tailwind-components,tailwind-utils;\\n@layer tailwind-base{\\n    @tailwind base;\\n}\\n@layer tailwind-components{\\n    @tailwind components;\\n}\\n@layer tailwind-utils {\\n    @tailwind utilities;\\n}\\n\")), mdx(\"p\", null, \"\\u5E76\\u5728\\u9879\\u76EE\\u7684 JS \\u5165\\u53E3\\u6587\\u4EF6\\uFF08\\u5373 App.tsx \\u6216 index.js\\uFF09\\u5904\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u6700\\u4E0A\\u65B9\"), \" import \\u4E0A\\u9762\\u4FEE\\u6539\\u7684\\u6587\\u4EF6\\u3002\\uFF08\\u901A\\u5E38\\u4E00\\u4E2A Tailwind \\u9879\\u76EE\\u5BF9\\u4E8E\\u4E0A\\u9762\\u6587\\u4EF6\\u7684 import \\u5DF2\\u7ECF\\u5904\\u7406\\u597D\\uFF0C\\u53EA\\u8981\\u5C06\\u8BE5 import \\u8BED\\u53E5\\u63D0\\u5230\\u6240\\u6709 import \\u8BED\\u53E5\\u524D\\u5373\\u53EF\\uFF09\"), mdx(Notice, {\n    title: \"\\u517C\\u5BB9\\u4F4E\\u7248\\u672C\\u6D4F\\u89C8\\u5668\",\n    mdxType: \"Notice\"\n  }, \"CSS Layer \\u8981\\u6C42\\u6D4F\\u89C8\\u5668\\u7248\\u672C\\u9AD8\\u4E8E Chromium 99 \", mdx(\"a\", {\n    target: \"_blank\",\n    href: \"https://caniuse.com/?search=CSS%20Cascade%20Layers\"\n  }, \"(\\u517C\\u5BB9\\u6027\\u8868\\u683C)\"), \"\\uFF0C\\u5982\\u679C\\u4F60\\u7684\\u7F51\\u7AD9\\u9700\\u8981\\u4F4E\\u7248\\u672C\\u6D4F\\u89C8\\u5668\\u8BBF\\u95EE\\uFF0C\\u9700\\u8981\\u6DFB\\u52A0 CSS Layer \\u7684 Polyfill\\uFF0C\\u8BF7\\u53C2\\u8003\\u6B64 Polyfill \\u7684 \", mdx(\"a\", {\n    target: \"_blank\",\n    href: \"https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-cascade-layers\"\n  }, \"PostCSS \\u63D2\\u4EF6\\u6587\\u6863\")), mdx(\"h4\", null, \"\\u539F\\u7406\"), mdx(\"p\", null, \"\\u901A\\u8FC7 CSS Layer \\u7279\\u6027\\uFF0C\\u5B9E\\u73B0\\u4E0D\\u540C\\u6765\\u6E90\\u7684\\u6837\\u5F0F\\u7684\\u4F18\\u5148\\u7EA7\\u8BBE\\u7F6E\\u3002\"), mdx(\"p\", null, \"\\u5F00\\u542F\\u63D2\\u4EF6\\u540E\\uFF0C\\u6240\\u6709\\u7684 Semi \\u6837\\u5F0F\\u90FD\\u4F1A\\u88AB \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"@layer {xxxx}\"), \" \\u5305\\u88F9\\u3002\\u53E6\\u5916\\uFF0C\\u6211\\u4EEC\\u4E5F\\u624B\\u52A8\\u8BBE\\u7F6E\\u4E86\\u9879\\u76EE\\u4E2D\\u7684 Tailwind \\u7684\\u5404\\u79CD\\u7C7B\\u578B\\u7684\\u6837\\u5F0F\\u7684 Layer\\u3002\"), mdx(\"p\", null, \"\\u53E6\\u5916\\uFF0C\\u6211\\u4EEC\\u914D\\u7F6E\\u4E86\\u5404\\u79CD Layer \\u7684\\u4F18\\u5148\\u7EA7\\u987A\\u5E8F\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\"\n  }, \"@layer tailwind-base,semi,tailwind-components,tailwind-utils;\\n\")), mdx(\"p\", null, \"\\u4E0A\\u8FF0 CSS \\u7684\\u542B\\u4E49\\u4E3A\\uFF0Cbase\\uFF08\\u542B Preflight\\uFF09\\u4F18\\u5148\\u7EA7\\u6700\\u4F4E\\uFF0CSemi \\u6B21\\u4E4B\\uFF0C\\u7528\\u6237\\u8BBE\\u7F6E\\u7684\\u539F\\u5B50\\u7C7B\\u6837\\u5F0F\\uFF08padding-\", \"[xxx]\", \" \\u7B49\\uFF09\\u4F18\\u5148\\u7EA7\\u6700\\u9AD8\\uFF0C\\u8FD9\\u6837\\u5373\\u53EF\\u89E3\\u51B3\\u4E0A\\u9762\\u9047\\u5230\\u7684\\u95EE\\u9898\\u3002\"), mdx(\"h3\", null, \"2.\\u89E3\\u51B3\\u5728 Tailwind \\u539F\\u5B50\\u7C7B\\u4E2D\\u4F7F\\u7528 Semi Token \\u7684\\u95EE\\u9898 (\\u53EF\\u9009)\"), mdx(\"p\", null, \"Tailwind \\u652F\\u6301\\u7528\\u6237\\u914D\\u7F6E\\u81EA\\u5DF1\\u7684 Token \\u6765\\u5B9E\\u73B0\\u4E3B\\u9898\\u3002\\u540C\\u65F6 Semi \\u4E5F\\u63D0\\u4F9B\\u4E86\\u81EA\\u5DF1\\u7684\\u4E3B\\u9898\\u65B9\\u6848\\u4E0E\\u5BF9\\u5E94 Token\\n\\u5982\\u679C\\u60F3\\u5728\\u9879\\u76EE\\u4E2D\\u76F4\\u63A5\\u4F7F\\u7528 Semi Token\\uFF0C\\u4F8B\\u5982\\u5C06\\u4E00\\u4E2A span \\u7684\\u6587\\u5B57\\u989C\\u8272\\u8BBE\\u7F6E\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"--semi-color-text-0\"), \" \\u6765\\u5B9E\\u73B0\\u4EAE\\u6697\\u8272\\u7684\\u989C\\u8272\\u81EA\\u52A8\\u5207\\u6362\\u4E0E\\u4E3B\\u9898\\u4FDD\\u6301\\u4E00\\u81F4\\uFF0C\\u9700\\u8981\\u5355\\u72EC\\u8BBE\\u7F6E css \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"color: var(--semi-color-text-0)\"), \"\\uFF0C\\u5F88\\u4E0D\\u65B9\\u4FBF\\u3002\"), mdx(\"p\", null, \"Semi \\u63D0\\u4F9B\\u4E86 Tailwind \\u7684\\u4E3B\\u9898\\u914D\\u7F6E\\u6587\\u4EF6\\uFF0C\\u7528\\u4E8E\\u5C06 Semi \\u7684 Token \\u6620\\u5C04\\u4E3A\\u539F\\u5B50\\u7C7B Token\\uFF0C\\u4E0A\\u8FF0\\u9700\\u6C42\\u53EF\\u4EE5\\u76F4\\u63A5\\u7ED9 span \\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"text-semi-color-text-0\"), \" \\u5373\\u53EF\\u3002\"), mdx(Notice, {\n    title: \"\\u9009\\u62E9\\u4F60\\u7684 Tailwind \\u7248\\u672C\",\n    mdxType: \"Notice\"\n  }, \"Tailwind v3 \\u548C v4 \\u7684\\u4E3B\\u9898\\u914D\\u7F6E\\u65B9\\u5F0F\\u4E0D\\u540C\\uFF0C\\u8BF7\\u6839\\u636E\\u4F60\\u4F7F\\u7528\\u7684\\u7248\\u672C\\u9009\\u62E9\\u5BF9\\u5E94\\u7684\\u914D\\u7F6E\\u65B9\\u5F0F\\u3002\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Tailwind v4 \\u914D\\u7F6E\\u65B9\\u5F0F\\uFF1A\")), mdx(\"p\", null, \"\\u5728\\u4F60\\u7684 Tailwind \\u5165\\u53E3 CSS \\u6587\\u4EF6\\u4E2D\\uFF08\\u5305\\u542B \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"@import \\\"tailwindcss\\\";\"), \" \\u7684\\u6587\\u4EF6\\uFF09\\uFF0C\\u6DFB\\u52A0 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"@theme\"), \" \\u914D\\u7F6E\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\"\n  }, \"@import \\\"tailwindcss\\\";\\n/**\\n * Semi Design Token \\u4E0E Tailwind CSS v4 \\u96C6\\u6210\\n * \\n * \\u539F\\u7406\\uFF1A\\n * 1. @theme \\u4E2D\\u7528 var(--semi-xxx) \\u5360\\u4F4D\\uFF0C\\u8BA9 Tailwind \\u751F\\u6210\\u5BF9\\u5E94\\u7684\\u5DE5\\u5177\\u7C7B\\n *    \\uFF08@theme \\u4E2D\\u7684 var() \\u4E0D\\u4F1A\\u5728\\u6784\\u5EFA\\u65F6\\u89E3\\u6790\\uFF0C\\u4EC5\\u4F5C\\u4E3A\\u5360\\u4F4D\\u7B26\\uFF09\\n * 2. body \\u4E2D\\u91CD\\u65B0\\u5B9A\\u4E49\\u8FD9\\u4E9B\\u53D8\\u91CF\\uFF0C\\u6307\\u5411 Semi \\u7684\\u771F\\u5B9E Token\\n *    \\uFF08\\u7528 body \\u800C\\u975E :root\\uFF0C\\u786E\\u4FDD\\u5728 Semi \\u6CE8\\u5165 :root \\u53D8\\u91CF\\u4E4B\\u540E\\u751F\\u6548\\uFF09\\n * \\n * \\u4F7F\\u7528\\u793A\\u4F8B\\uFF1A\\n *   bg-semi-color-primary     -> \\u4E3B\\u8272\\u80CC\\u666F\\n *   text-semi-color-text-0    -> \\u4E3B\\u8981\\u6587\\u5B57\\u989C\\u8272\\n *   rounded-semi-border-radius-medium -> \\u4E2D\\u7B49\\u5706\\u89D2\\n */\\n\\n@theme {\\n  /* ========== \\u57FA\\u7840\\u8272 ========== */\\n  --color-semi-color-white: var(--semi-color-white);\\n  --color-semi-color-black: var(--semi-color-black);\\n\\n  /* ========== Primary \\u4E3B\\u8272 ========== */\\n  --color-semi-color-primary: var(--semi-color-primary);\\n  --color-semi-color-primary-hover: var(--semi-color-primary-hover);\\n  --color-semi-color-primary-active: var(--semi-color-primary-active);\\n  --color-semi-color-primary-disabled: var(--semi-color-primary-disabled);\\n  --color-semi-color-primary-light-default: var(--semi-color-primary-light-default);\\n  --color-semi-color-primary-light-hover: var(--semi-color-primary-light-hover);\\n  --color-semi-color-primary-light-active: var(--semi-color-primary-light-active);\\n\\n  /* ========== Secondary \\u6B21\\u8981\\u8272 ========== */\\n  --color-semi-color-secondary: var(--semi-color-secondary);\\n  --color-semi-color-secondary-hover: var(--semi-color-secondary-hover);\\n  --color-semi-color-secondary-active: var(--semi-color-secondary-active);\\n  --color-semi-color-secondary-disabled: var(--semi-color-secondary-disabled);\\n  --color-semi-color-secondary-light-default: var(--semi-color-secondary-light-default);\\n  --color-semi-color-secondary-light-hover: var(--semi-color-secondary-light-hover);\\n  --color-semi-color-secondary-light-active: var(--semi-color-secondary-light-active);\\n\\n  /* ========== Tertiary \\u7B2C\\u4E09\\u8272 ========== */\\n  --color-semi-color-tertiary: var(--semi-color-tertiary);\\n  --color-semi-color-tertiary-hover: var(--semi-color-tertiary-hover);\\n  --color-semi-color-tertiary-active: var(--semi-color-tertiary-active);\\n  --color-semi-color-tertiary-light-default: var(--semi-color-tertiary-light-default);\\n  --color-semi-color-tertiary-light-hover: var(--semi-color-tertiary-light-hover);\\n  --color-semi-color-tertiary-light-active: var(--semi-color-tertiary-light-active);\\n\\n  /* ========== Default \\u9ED8\\u8BA4\\u8272 ========== */\\n  --color-semi-color-default: var(--semi-color-default);\\n  --color-semi-color-default-hover: var(--semi-color-default-hover);\\n  --color-semi-color-default-active: var(--semi-color-default-active);\\n\\n  /* ========== Info \\u4FE1\\u606F\\u8272 ========== */\\n  --color-semi-color-info: var(--semi-color-info);\\n  --color-semi-color-info-hover: var(--semi-color-info-hover);\\n  --color-semi-color-info-active: var(--semi-color-info-active);\\n  --color-semi-color-info-disabled: var(--semi-color-info-disabled);\\n  --color-semi-color-info-light-default: var(--semi-color-info-light-default);\\n  --color-semi-color-info-light-hover: var(--semi-color-info-light-hover);\\n  --color-semi-color-info-light-active: var(--semi-color-info-light-active);\\n\\n  /* ========== Success \\u6210\\u529F\\u8272 ========== */\\n  --color-semi-color-success: var(--semi-color-success);\\n  --color-semi-color-success-hover: var(--semi-color-success-hover);\\n  --color-semi-color-success-active: var(--semi-color-success-active);\\n  --color-semi-color-success-disabled: var(--semi-color-success-disabled);\\n  --color-semi-color-success-light-default: var(--semi-color-success-light-default);\\n  --color-semi-color-success-light-hover: var(--semi-color-success-light-hover);\\n  --color-semi-color-success-light-active: var(--semi-color-success-light-active);\\n\\n  /* ========== Danger \\u5371\\u9669\\u8272 ========== */\\n  --color-semi-color-danger: var(--semi-color-danger);\\n  --color-semi-color-danger-hover: var(--semi-color-danger-hover);\\n  --color-semi-color-danger-active: var(--semi-color-danger-active);\\n  --color-semi-color-danger-light-default: var(--semi-color-danger-light-default);\\n  --color-semi-color-danger-light-hover: var(--semi-color-danger-light-hover);\\n  --color-semi-color-danger-light-active: var(--semi-color-danger-light-active);\\n\\n  /* ========== Warning \\u8B66\\u544A\\u8272 ========== */\\n  --color-semi-color-warning: var(--semi-color-warning);\\n  --color-semi-color-warning-hover: var(--semi-color-warning-hover);\\n  --color-semi-color-warning-active: var(--semi-color-warning-active);\\n  --color-semi-color-warning-light-default: var(--semi-color-warning-light-default);\\n  --color-semi-color-warning-light-hover: var(--semi-color-warning-light-hover);\\n  --color-semi-color-warning-light-active: var(--semi-color-warning-light-active);\\n\\n  /* ========== \\u529F\\u80FD\\u8272 ========== */\\n  --color-semi-color-focus-border: var(--semi-color-focus-border);\\n  --color-semi-color-disabled-text: var(--semi-color-disabled-text);\\n  --color-semi-color-disabled-border: var(--semi-color-disabled-border);\\n  --color-semi-color-disabled-bg: var(--semi-color-disabled-bg);\\n  --color-semi-color-disabled-fill: var(--semi-color-disabled-fill);\\n  --color-semi-color-shadow: var(--semi-color-shadow);\\n\\n  /* ========== Link \\u94FE\\u63A5\\u8272 ========== */\\n  --color-semi-color-link: var(--semi-color-link);\\n  --color-semi-color-link-hover: var(--semi-color-link-hover);\\n  --color-semi-color-link-active: var(--semi-color-link-active);\\n  --color-semi-color-link-visited: var(--semi-color-link-visited);\\n\\n  /* ========== Border \\u8FB9\\u6846 ========== */\\n  --color-semi-color-border: var(--semi-color-border);\\n\\n  /* ========== Background \\u80CC\\u666F\\u8272 ========== */\\n  --color-semi-color-nav-bg: var(--semi-color-nav-bg);\\n  --color-semi-color-overlay-bg: var(--semi-color-overlay-bg);\\n  --color-semi-color-bg-0: var(--semi-color-bg-0);\\n  --color-semi-color-bg-1: var(--semi-color-bg-1);\\n  --color-semi-color-bg-2: var(--semi-color-bg-2);\\n  --color-semi-color-bg-3: var(--semi-color-bg-3);\\n  --color-semi-color-bg-4: var(--semi-color-bg-4);\\n\\n  /* ========== Fill \\u586B\\u5145\\u8272 ========== */\\n  --color-semi-color-fill-0: var(--semi-color-fill-0);\\n  --color-semi-color-fill-1: var(--semi-color-fill-1);\\n  --color-semi-color-fill-2: var(--semi-color-fill-2);\\n\\n  /* ========== Text \\u6587\\u5B57\\u8272 ========== */\\n  --color-semi-color-text-0: var(--semi-color-text-0);\\n  --color-semi-color-text-1: var(--semi-color-text-1);\\n  --color-semi-color-text-2: var(--semi-color-text-2);\\n  --color-semi-color-text-3: var(--semi-color-text-3);\\n\\n  /* ========== Highlight \\u9AD8\\u4EAE\\u8272 ========== */\\n  --color-semi-color-highlight-bg: var(--semi-color-highlight-bg);\\n  --color-semi-color-highlight: var(--semi-color-highlight);\\n\\n  /* ========== Data \\u6570\\u636E\\u53EF\\u89C6\\u5316\\u8272 ========== */\\n  --color-semi-color-data-0: var(--semi-color-data-0);\\n  --color-semi-color-data-1: var(--semi-color-data-1);\\n  --color-semi-color-data-2: var(--semi-color-data-2);\\n  --color-semi-color-data-3: var(--semi-color-data-3);\\n  --color-semi-color-data-4: var(--semi-color-data-4);\\n  --color-semi-color-data-5: var(--semi-color-data-5);\\n  --color-semi-color-data-6: var(--semi-color-data-6);\\n  --color-semi-color-data-7: var(--semi-color-data-7);\\n  --color-semi-color-data-8: var(--semi-color-data-8);\\n  --color-semi-color-data-9: var(--semi-color-data-9);\\n  --color-semi-color-data-10: var(--semi-color-data-10);\\n  --color-semi-color-data-11: var(--semi-color-data-11);\\n  --color-semi-color-data-12: var(--semi-color-data-12);\\n  --color-semi-color-data-13: var(--semi-color-data-13);\\n  --color-semi-color-data-14: var(--semi-color-data-14);\\n  --color-semi-color-data-15: var(--semi-color-data-15);\\n  --color-semi-color-data-16: var(--semi-color-data-16);\\n  --color-semi-color-data-17: var(--semi-color-data-17);\\n  --color-semi-color-data-18: var(--semi-color-data-18);\\n  --color-semi-color-data-19: var(--semi-color-data-19);\\n\\n  /* ========== Border Radius \\u5706\\u89D2 ========== */\\n  --radius-semi-border-radius-extra-small: var(--semi-border-radius-extra-small);\\n  --radius-semi-border-radius-small: var(--semi-border-radius-small);\\n  --radius-semi-border-radius-medium: var(--semi-border-radius-medium);\\n  --radius-semi-border-radius-large: var(--semi-border-radius-large);\\n  --radius-semi-border-radius-circle: var(--semi-border-radius-circle);\\n  --radius-semi-border-radius-full: var(--semi-border-radius-full);\\n}\\n\\n/**\\n * \\u8FD0\\u884C\\u65F6\\u53D8\\u91CF\\u8986\\u76D6\\n * \\u7528 body \\u9009\\u62E9\\u5668\\u786E\\u4FDD\\u5728 Semi \\u7684 :root \\u53D8\\u91CF\\u6CE8\\u5165\\u540E\\u751F\\u6548\\n */\\nbody {\\n  /* \\u57FA\\u7840\\u8272 */\\n  --color-semi-color-white: var(--semi-color-white);\\n  --color-semi-color-black: var(--semi-color-black);\\n\\n  /* Primary */\\n  --color-semi-color-primary: var(--semi-color-primary);\\n  --color-semi-color-primary-hover: var(--semi-color-primary-hover);\\n  --color-semi-color-primary-active: var(--semi-color-primary-active);\\n  --color-semi-color-primary-disabled: var(--semi-color-primary-disabled);\\n  --color-semi-color-primary-light-default: var(--semi-color-primary-light-default);\\n  --color-semi-color-primary-light-hover: var(--semi-color-primary-light-hover);\\n  --color-semi-color-primary-light-active: var(--semi-color-primary-light-active);\\n\\n  /* Secondary */\\n  --color-semi-color-secondary: var(--semi-color-secondary);\\n  --color-semi-color-secondary-hover: var(--semi-color-secondary-hover);\\n  --color-semi-color-secondary-active: var(--semi-color-secondary-active);\\n  --color-semi-color-secondary-disabled: var(--semi-color-secondary-disabled);\\n  --color-semi-color-secondary-light-default: var(--semi-color-secondary-light-default);\\n  --color-semi-color-secondary-light-hover: var(--semi-color-secondary-light-hover);\\n  --color-semi-color-secondary-light-active: var(--semi-color-secondary-light-active);\\n\\n  /* Tertiary */\\n  --color-semi-color-tertiary: var(--semi-color-tertiary);\\n  --color-semi-color-tertiary-hover: var(--semi-color-tertiary-hover);\\n  --color-semi-color-tertiary-active: var(--semi-color-tertiary-active);\\n  --color-semi-color-tertiary-light-default: var(--semi-color-tertiary-light-default);\\n  --color-semi-color-tertiary-light-hover: var(--semi-color-tertiary-light-hover);\\n  --color-semi-color-tertiary-light-active: var(--semi-color-tertiary-light-active);\\n\\n  /* Default */\\n  --color-semi-color-default: var(--semi-color-default);\\n  --color-semi-color-default-hover: var(--semi-color-default-hover);\\n  --color-semi-color-default-active: var(--semi-color-default-active);\\n\\n  /* Info */\\n  --color-semi-color-info: var(--semi-color-info);\\n  --color-semi-color-info-hover: var(--semi-color-info-hover);\\n  --color-semi-color-info-active: var(--semi-color-info-active);\\n  --color-semi-color-info-disabled: var(--semi-color-info-disabled);\\n  --color-semi-color-info-light-default: var(--semi-color-info-light-default);\\n  --color-semi-color-info-light-hover: var(--semi-color-info-light-hover);\\n  --color-semi-color-info-light-active: var(--semi-color-info-light-active);\\n\\n  /* Success */\\n  --color-semi-color-success: var(--semi-color-success);\\n  --color-semi-color-success-hover: var(--semi-color-success-hover);\\n  --color-semi-color-success-active: var(--semi-color-success-active);\\n  --color-semi-color-success-disabled: var(--semi-color-success-disabled);\\n  --color-semi-color-success-light-default: var(--semi-color-success-light-default);\\n  --color-semi-color-success-light-hover: var(--semi-color-success-light-hover);\\n  --color-semi-color-success-light-active: var(--semi-color-success-light-active);\\n\\n  /* Danger */\\n  --color-semi-color-danger: var(--semi-color-danger);\\n  --color-semi-color-danger-hover: var(--semi-color-danger-hover);\\n  --color-semi-color-danger-active: var(--semi-color-danger-active);\\n  --color-semi-color-danger-light-default: var(--semi-color-danger-light-default);\\n  --color-semi-color-danger-light-hover: var(--semi-color-danger-light-hover);\\n  --color-semi-color-danger-light-active: var(--semi-color-danger-light-active);\\n\\n  /* Warning */\\n  --color-semi-color-warning: var(--semi-color-warning);\\n  --color-semi-color-warning-hover: var(--semi-color-warning-hover);\\n  --color-semi-color-warning-active: var(--semi-color-warning-active);\\n  --color-semi-color-warning-light-default: var(--semi-color-warning-light-default);\\n  --color-semi-color-warning-light-hover: var(--semi-color-warning-light-hover);\\n  --color-semi-color-warning-light-active: var(--semi-color-warning-light-active);\\n\\n  /* \\u529F\\u80FD\\u8272 */\\n  --color-semi-color-focus-border: var(--semi-color-focus-border);\\n  --color-semi-color-disabled-text: var(--semi-color-disabled-text);\\n  --color-semi-color-disabled-border: var(--semi-color-disabled-border);\\n  --color-semi-color-disabled-bg: var(--semi-color-disabled-bg);\\n  --color-semi-color-disabled-fill: var(--semi-color-disabled-fill);\\n  --color-semi-color-shadow: var(--semi-color-shadow);\\n\\n  /* Link */\\n  --color-semi-color-link: var(--semi-color-link);\\n  --color-semi-color-link-hover: var(--semi-color-link-hover);\\n  --color-semi-color-link-active: var(--semi-color-link-active);\\n  --color-semi-color-link-visited: var(--semi-color-link-visited);\\n\\n  /* Border */\\n  --color-semi-color-border: var(--semi-color-border);\\n\\n  /* Background */\\n  --color-semi-color-nav-bg: var(--semi-color-nav-bg);\\n  --color-semi-color-overlay-bg: var(--semi-color-overlay-bg);\\n  --color-semi-color-bg-0: var(--semi-color-bg-0);\\n  --color-semi-color-bg-1: var(--semi-color-bg-1);\\n  --color-semi-color-bg-2: var(--semi-color-bg-2);\\n  --color-semi-color-bg-3: var(--semi-color-bg-3);\\n  --color-semi-color-bg-4: var(--semi-color-bg-4);\\n\\n  /* Fill */\\n  --color-semi-color-fill-0: var(--semi-color-fill-0);\\n  --color-semi-color-fill-1: var(--semi-color-fill-1);\\n  --color-semi-color-fill-2: var(--semi-color-fill-2);\\n\\n  /* Text */\\n  --color-semi-color-text-0: var(--semi-color-text-0);\\n  --color-semi-color-text-1: var(--semi-color-text-1);\\n  --color-semi-color-text-2: var(--semi-color-text-2);\\n  --color-semi-color-text-3: var(--semi-color-text-3);\\n\\n  /* Highlight */\\n  --color-semi-color-highlight-bg: var(--semi-color-highlight-bg);\\n  --color-semi-color-highlight: var(--semi-color-highlight);\\n\\n  /* Data */\\n  --color-semi-color-data-0: var(--semi-color-data-0);\\n  --color-semi-color-data-1: var(--semi-color-data-1);\\n  --color-semi-color-data-2: var(--semi-color-data-2);\\n  --color-semi-color-data-3: var(--semi-color-data-3);\\n  --color-semi-color-data-4: var(--semi-color-data-4);\\n  --color-semi-color-data-5: var(--semi-color-data-5);\\n  --color-semi-color-data-6: var(--semi-color-data-6);\\n  --color-semi-color-data-7: var(--semi-color-data-7);\\n  --color-semi-color-data-8: var(--semi-color-data-8);\\n  --color-semi-color-data-9: var(--semi-color-data-9);\\n  --color-semi-color-data-10: var(--semi-color-data-10);\\n  --color-semi-color-data-11: var(--semi-color-data-11);\\n  --color-semi-color-data-12: var(--semi-color-data-12);\\n  --color-semi-color-data-13: var(--semi-color-data-13);\\n  --color-semi-color-data-14: var(--semi-color-data-14);\\n  --color-semi-color-data-15: var(--semi-color-data-15);\\n  --color-semi-color-data-16: var(--semi-color-data-16);\\n  --color-semi-color-data-17: var(--semi-color-data-17);\\n  --color-semi-color-data-18: var(--semi-color-data-18);\\n  --color-semi-color-data-19: var(--semi-color-data-19);\\n\\n  /* Border Radius */\\n  --radius-semi-border-radius-extra-small: var(--semi-border-radius-extra-small);\\n  --radius-semi-border-radius-small: var(--semi-border-radius-small);\\n  --radius-semi-border-radius-medium: var(--semi-border-radius-medium);\\n  --radius-semi-border-radius-large: var(--semi-border-radius-large);\\n  --radius-semi-border-radius-circle: var(--semi-border-radius-circle);\\n  --radius-semi-border-radius-full: var(--semi-border-radius-full);\\n}\\n\\n\")), mdx(\"p\", null, \"\\u914D\\u7F6E\\u540E\\u5373\\u53EF\\u4F7F\\u7528\\u5982 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"text-semi-color-text-0\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"bg-semi-color-primary\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"rounded-semi-border-radius-small\"), \" \\u7B49\\u539F\\u5B50\\u7C7B\\u3002\"), mdx(\"hr\", null), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Tailwind v3 \\u914D\\u7F6E\\u65B9\\u5F0F\\uFF1A\")), mdx(\"p\", null, \"\\u5728 Tailwind \\u914D\\u7F6E\\u4E2D (\\u5373 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"tailwind.config.js\"), \") \\u914D\\u7F6E\\u4EE5\\u4E0B\\u5185\\u5BB9\\u5373\\u53EF\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"module.exports = {\\n    theme:{\\n        colors:{\\n            \\\"semi-color-white\\\": \\\"var(--semi-color-white)\\\",\\n            \\\"semi-color-black\\\": \\\"var(--semi-color-black)\\\",\\n            \\\"semi-color-primary\\\": \\\"var(--semi-color-primary)\\\",\\n            \\\"semi-color-primary-hover\\\": \\\"var(--semi-color-primary-hover)\\\",\\n            \\\"semi-color-primary-active\\\": \\\"var(--semi-color-primary-active)\\\",\\n            \\\"semi-color-primary-disabled\\\": \\\"var(--semi-color-primary-disabled)\\\",\\n            \\\"semi-color-primary-light-default\\\": \\\"var(--semi-color-primary-light-default)\\\",\\n            \\\"semi-color-primary-light-hover\\\": \\\"var(--semi-color-primary-light-hover)\\\",\\n            \\\"semi-color-primary-light-active\\\": \\\"var(--semi-color-primary-light-active)\\\",\\n            \\\"semi-color-secondary\\\": \\\"var(--semi-color-secondary)\\\",\\n            \\\"semi-color-secondary-hover\\\": \\\"var(--semi-color-secondary-hover)\\\",\\n            \\\"semi-color-secondary-active\\\": \\\"var(--semi-color-secondary-active)\\\",\\n            \\\"semi-color-secondary-disabled\\\": \\\"var(--semi-color-secondary-disabled)\\\",\\n            \\\"semi-color-secondary-light-default\\\": \\\"var(--semi-color-secondary-light-default)\\\",\\n            \\\"semi-color-secondary-light-hover\\\": \\\"var(--semi-color-secondary-light-hover)\\\",\\n            \\\"semi-color-secondary-light-active\\\": \\\"var(--semi-color-secondary-light-active)\\\",\\n            \\\"semi-color-tertiary\\\": \\\"var(--semi-color-tertiary)\\\",\\n            \\\"semi-color-tertiary-hover\\\": \\\"var(--semi-color-tertiary-hover)\\\",\\n            \\\"semi-color-tertiary-active\\\": \\\"var(--semi-color-tertiary-active)\\\",\\n            \\\"semi-color-tertiary-light-default\\\": \\\"var(--semi-color-tertiary-light-default)\\\",\\n            \\\"semi-color-tertiary-light-hover\\\": \\\"var(--semi-color-tertiary-light-hover)\\\",\\n            \\\"semi-color-tertiary-light-active\\\": \\\"var(--semi-color-tertiary-light-active)\\\",\\n            \\\"semi-color-default\\\": \\\"var(--semi-color-default)\\\",\\n            \\\"semi-color-default-hover\\\": \\\"var(--semi-color-default-hover)\\\",\\n            \\\"semi-color-default-active\\\": \\\"var(--semi-color-default-active)\\\",\\n            \\\"semi-color-info\\\": \\\"var(--semi-color-info)\\\",\\n            \\\"semi-color-info-hover\\\": \\\"var(--semi-color-info-hover)\\\",\\n            \\\"semi-color-info-active\\\": \\\"var(--semi-color-info-active)\\\",\\n            \\\"semi-color-info-disabled\\\": \\\"var(--semi-color-info-disabled)\\\",\\n            \\\"semi-color-info-light-default\\\": \\\"var(--semi-color-info-light-default)\\\",\\n            \\\"semi-color-info-light-hover\\\": \\\"var(--semi-color-info-light-hover)\\\",\\n            \\\"semi-color-info-light-active\\\": \\\"var(--semi-color-info-light-active)\\\",\\n            \\\"semi-color-success\\\": \\\"var(--semi-color-success)\\\",\\n            \\\"semi-color-success-hover\\\": \\\"var(--semi-color-success-hover)\\\",\\n            \\\"semi-color-success-active\\\": \\\"var(--semi-color-success-active)\\\",\\n            \\\"semi-color-success-disabled\\\": \\\"var(--semi-color-success-disabled)\\\",\\n            \\\"semi-color-success-light-default\\\": \\\"var(--semi-color-success-light-default)\\\",\\n            \\\"semi-color-success-light-hover\\\": \\\"var(--semi-color-success-light-hover)\\\",\\n            \\\"semi-color-success-light-active\\\": \\\"var(--semi-color-success-light-active)\\\",\\n            \\\"semi-color-danger\\\": \\\"var(--semi-color-danger)\\\",\\n            \\\"semi-color-danger-hover\\\": \\\"var(--semi-color-danger-hover)\\\",\\n            \\\"semi-color-danger-active\\\": \\\"var(--semi-color-danger-active)\\\",\\n            \\\"semi-color-danger-light-default\\\": \\\"var(--semi-color-danger-light-default)\\\",\\n            \\\"semi-color-danger-light-hover\\\": \\\"var(--semi-color-danger-light-hover)\\\",\\n            \\\"semi-color-danger-light-active\\\": \\\"var(--semi-color-danger-light-active)\\\",\\n            \\\"semi-color-warning\\\": \\\"var(--semi-color-warning)\\\",\\n            \\\"semi-color-warning-hover\\\": \\\"var(--semi-color-warning-hover)\\\",\\n            \\\"semi-color-warning-active\\\": \\\"var(--semi-color-warning-active)\\\",\\n            \\\"semi-color-warning-light-default\\\": \\\"var(--semi-color-warning-light-default)\\\",\\n            \\\"semi-color-warning-light-hover\\\": \\\"var(--semi-color-warning-light-hover)\\\",\\n            \\\"semi-color-warning-light-active\\\": \\\"var(--semi-color-warning-light-active)\\\",\\n            \\\"semi-color-focus-border\\\": \\\"var(--semi-color-focus-border)\\\",\\n            \\\"semi-color-disabled-text\\\": \\\"var(--semi-color-disabled-text)\\\",\\n            \\\"semi-color-disabled-border\\\": \\\"var(--semi-color-disabled-border)\\\",\\n            \\\"semi-color-disabled-bg\\\": \\\"var(--semi-color-disabled-bg)\\\",\\n            \\\"semi-color-disabled-fill\\\": \\\"var(--semi-color-disabled-fill)\\\",\\n            \\\"semi-color-shadow\\\": \\\"var(--semi-color-shadow)\\\",\\n            \\\"semi-color-link\\\": \\\"var(--semi-color-link)\\\",\\n            \\\"semi-color-link-hover\\\": \\\"var(--semi-color-link-hover)\\\",\\n            \\\"semi-color-link-active\\\": \\\"var(--semi-color-link-active)\\\",\\n            \\\"semi-color-link-visited\\\": \\\"var(--semi-color-link-visited)\\\",\\n            \\\"semi-color-border\\\": \\\"var(--semi-color-border)\\\",\\n            \\\"semi-color-nav-bg\\\": \\\"var(--semi-color-nav-bg)\\\",\\n            \\\"semi-color-overlay-bg\\\": \\\"var(--semi-color-overlay-bg)\\\",\\n            \\\"semi-color-fill-0\\\": \\\"var(--semi-color-fill-0)\\\",\\n            \\\"semi-color-fill-1\\\": \\\"var(--semi-color-fill-1)\\\",\\n            \\\"semi-color-fill-2\\\": \\\"var(--semi-color-fill-2)\\\",\\n            \\\"semi-color-bg-0\\\": \\\"var(--semi-color-bg-0)\\\",\\n            \\\"semi-color-bg-1\\\": \\\"var(--semi-color-bg-1)\\\",\\n            \\\"semi-color-bg-2\\\": \\\"var(--semi-color-bg-2)\\\",\\n            \\\"semi-color-bg-3\\\": \\\"var(--semi-color-bg-3)\\\",\\n            \\\"semi-color-bg-4\\\": \\\"var(--semi-color-bg-4)\\\",\\n            \\\"semi-color-text-0\\\": \\\"var(--semi-color-text-0)\\\",\\n            \\\"semi-color-text-1\\\": \\\"var(--semi-color-text-1)\\\",\\n            \\\"semi-color-text-2\\\": \\\"var(--semi-color-text-2)\\\",\\n            \\\"semi-color-text-3\\\": \\\"var(--semi-color-text-3)\\\",\\n            \\\"semi-color-highlight-bg\\\": \\\"var(--semi-color-highlight-bg)\\\",\\n            \\\"semi-color-highlight\\\": \\\"var(--semi-color-highlight)\\\",\\n            \\\"semi-color-data-0\\\": \\\"var(--semi-color-data-0)\\\",\\n            \\\"semi-color-data-1\\\": \\\"var(--semi-color-data-1)\\\",\\n            \\\"semi-color-data-2\\\": \\\"var(--semi-color-data-2)\\\",\\n            \\\"semi-color-data-3\\\": \\\"var(--semi-color-data-3)\\\",\\n            \\\"semi-color-data-4\\\": \\\"var(--semi-color-data-4)\\\",\\n            \\\"semi-color-data-5\\\": \\\"var(--semi-color-data-5)\\\",\\n            \\\"semi-color-data-6\\\": \\\"var(--semi-color-data-6)\\\",\\n            \\\"semi-color-data-7\\\": \\\"var(--semi-color-data-7)\\\",\\n            \\\"semi-color-data-8\\\": \\\"var(--semi-color-data-8)\\\",\\n            \\\"semi-color-data-9\\\": \\\"var(--semi-color-data-9)\\\",\\n            \\\"semi-color-data-10\\\": \\\"var(--semi-color-data-10)\\\",\\n            \\\"semi-color-data-11\\\": \\\"var(--semi-color-data-11)\\\",\\n            \\\"semi-color-data-12\\\": \\\"var(--semi-color-data-12)\\\",\\n            \\\"semi-color-data-13\\\": \\\"var(--semi-color-data-13)\\\",\\n            \\\"semi-color-data-14\\\": \\\"var(--semi-color-data-14)\\\",\\n            \\\"semi-color-data-15\\\": \\\"var(--semi-color-data-15)\\\",\\n            \\\"semi-color-data-16\\\": \\\"var(--semi-color-data-16)\\\",\\n            \\\"semi-color-data-17\\\": \\\"var(--semi-color-data-17)\\\",\\n            \\\"semi-color-data-18\\\": \\\"var(--semi-color-data-18)\\\",\\n            \\\"semi-color-data-19\\\": \\\"var(--semi-color-data-19)\\\"\\n        },\\n        extend:{\\n            borderRadius:{\\n                \\\"semi-border-radius-extra-small\\\": \\\"var(--semi-border-radius-extra-small)\\\",\\n                \\\"semi-border-radius-small\\\": \\\"var(--semi-border-radius-small)\\\",\\n                \\\"semi-border-radius-medium\\\": \\\"var(--semi-border-radius-medium)\\\",\\n                \\\"semi-border-radius-large\\\": \\\"var(--semi-border-radius-large)\\\",\\n                \\\"semi-border-radius-circle\\\": \\\"var(--semi-border-radius-circle)\\\",\\n                \\\"semi-border-radius-full\\\": \\\"var(--semi-border-radius-full)\\\",\\n            }\\n        }\\n    }\\n}\\n\")));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/ecosystem/tailwind","next":{"fields":{"slug":"en-US/ecosystem/web-components"},"id":"4ff18775-a290-53ee-aad0-8cfa30823288","frontmatter":{"title":"Web Components","localeCode":"en-US","icon":"doc-webcomponents","showNew":null}},"previous":{"fields":{"slug":"en-US/ecosystem/tailwind"},"id":"a6b65278-e6f2-5110-9ba6-e3ea26723e79","frontmatter":{"title":"With TailwindCSS","localeCode":"en-US","icon":"doc-tailwind","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}