npm - @modern-js/module-tools-docs - Versions diffs - 2.25.2-beta.0 → 2.25.2 - Mend

@modern-js/module-tools-docs 2.25.2-beta.0 → 2.25.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (210) hide show

package/doc_build/api/config/design-system.html DELETED Viewed

@@ -1,113 +0,0 @@
-<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1">
-<script id="check-dark-light">
-;(() => {
-  const saved = localStorage.getItem('modern-theme-appearance')
-  const prefereDark = window.matchMedia('(prefers-color-scheme: dark)').matches
-  if (!saved || saved === 'auto' ? prefereDark : saved === 'dark') {
-    document.documentElement.classList.add('dark')
-  }
-})()
-</script>
-<link rel="icon" href="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/logo-1x-0104.png"><script defer="defer">!function(){var _,d,s,e,c,i,n,o,a,t,u={},g={};function f(_){var d=g[_];if(void 0!==d)return d.exports;var s=g[_]={exports:{}};return u[_](s,s.exports,f),s.exports}f.m=u,!function(){function _(d){if("function"!=typeof WeakMap)return null;var s=new WeakMap,e=new WeakMap;return(_=function(_){return _?e:s})(d)}f.ir=function(d,s){if(!s&&d&&d.__esModule)return d;if(null===d||"object"!=typeof d&&"function"!=typeof d)return{default:d};var e=_(s);if(e&&e.has(d))return e.get(d);var c={},i=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var n in d)if("default"!==n&&Object.prototype.hasOwnProperty.call(d,n)){var o=i?Object.getOwnPropertyDescriptor(d,n):null;o&&(o.get||o.set)?Object.defineProperty(c,n,o):c[n]=d[n]}return c.default=d,e&&e.set(d,c),c}}(),f.es=function(_,d){return Object.keys(_).forEach(function(s){"default"!==s&&!Object.prototype.hasOwnProperty.call(d,s)&&Object.defineProperty(d,s,{enumerable:!0,get:function(){return _[s]}})}),_},_={10138:[],10179:[],10299:[],10530:[],10825:[],10929:[],11096:[],11385:[],11413:[],1163:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_plugins_guide_plugin-object_mdx"],11665:[],11678:[],11696:[],12764:[],12784:[],1282:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_api_plugin-api_plugin-hooks_md"],12855:[],13139:[],13251:[],13259:[],13345:[],13397:[],13473:[],13487:["docs_en_api_index_md"],13507:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_api_config_build-preset_mdx"],13545:[],13637:[],13652:[],13835:[],13867:[],13915:[],14095:[],14115:[],14120:[],14309:[],14423:[],14641:[],14704:[],15028:[],15042:[],1509:[],15624:[],15710:[],15863:[],15880:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_guide_advance_copy_md"],16726:[],16737:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_guide_advance_build-umd_mdx"],17100:[],17190:[],17290:[],17331:[],17713:["docs_zh_index_md"],17816:[],17832:[],17912:[],18055:[],18456:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_guide_basic_using-storybook_mdx"],18595:[],18673:[],18989:["default~docs_en_guide_faq_build_mdx~docs_en_guide_faq_storybook_mdx~docs_en_guide_faq_test_md~931d29"],19054:[],19585:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_api_plugin-api_plugin-hooks_md"],19805:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_guide_basic_command-preview_md"],20150:[],20250:[],20308:[],20345:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_guide_advance_external-dependency_mdx"],20449:[],20551:[],2056:[],20590:[],20678:[],20758:[],20826:["default~docs_en_guide_faq_build_mdx~docs_en_guide_faq_storybook_mdx~docs_en_guide_faq_test_md~931d29"],20976:[],21382:[],21397:[],21666:["docs_en_guide_intro_why-module-engineering-solution_md"],21699:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_guide_advance_in-depth-about-dev-command_md"],21724:["docs_en_index_md"],21774:[],21829:[],21893:[],22101:[],2212:[],22124:[],22151:[],2225:[],22297:["default~docs_en_guide_faq_build_mdx~docs_en_guide_faq_storybook_mdx~docs_en_guide_faq_test_md~931d29"],22326:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_api_config_testing_md"],22430:[],2250:[],22588:["docs_zh_guide_faq_index_md"],22947:[],23037:[],23095:[],23112:[],23148:[],23172:[],23205:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_plugins_official-list_plugin-import_mdx"],23279:[],23570:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_guide_advance_asset_mdx"],23759:[],23931:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_guide_basic_publish-your-project_md"],24198:[],24359:[],24622:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_guide_basic_test-your-project_mdx"],24667:[],24786:[],25010:["default~docs_en_guide_faq_build_mdx~docs_en_guide_faq_storybook_mdx~docs_en_guide_faq_test_md~931d29"],25355:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_api_config_design-system_md"],25483:[],25806:["default~docs_en_guide_faq_build_mdx~docs_en_guide_faq_storybook_mdx~docs_en_guide_faq_test_md~931d29"],26201:[],26281:[],26367:[],2637:[],26443:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_guide_basic_modify-output-product_md"],26444:[],2663:[],26693:[],26723:[],26825:[],27151:[],27267:[],2733:[],27610:[],27677:[],27732:[],27844:[],28020:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_guide_best-practices_components_mdx"],28049:[],28117:[],28263:[],28268:[],28547:[],28840:[],28846:[],29203:[],29391:[],29608:[],29645:[],29874:[],30075:[],30108:[],30251:[],30354:[],30372:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_guide_advance_theme-config_mdx"],30732:[],3105:[],3123:[],31250:[],31360:[],31601:[],31874:[],31958:[],3204:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_plugins_guide_getting-started_mdx"],32046:[],3247:[],32560:[],32573:["docs_zh_guide_intro_welcome_md"],32694:[],32908:[],32910:[],33232:[],33379:[],33588:[],33786:[],34165:[],34189:[],34243:[],34700:[],34724:[],34799:[],35179:[],35289:[],35393:[],35574:[],35605:[],35803:[],35944:[],36034:[],36333:[],36448:[],36797:[],36889:[],37036:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_guide_best-practices_components_mdx"],37137:[],37359:[],37430:[],38058:[],38091:[],38113:[],38472:[],3860:[],39040:[],39108:[],39198:[],39235:[],39605:[],39802:[],40428:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_guide_basic_command-preview_md"],41413:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_api_config_plugins_md"],41472:[],41538:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_guide_advance_in-depth-about-build_md"],41541:[],41567:[],42271:[],42283:[],42292:[],42368:[],42483:[],42731:[],42882:[],43179:[],43290:[],43409:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_api_config_plugins_md"],44113:[],44491:[],44802:[],44855:[],45127:["docs_en_guide_faq_index_md"],45141:[],45213:[],45317:[],45457:[],45914:[],45995:[],46256:[],46285:[],46333:["docs_en_plugins_official-list_overview_md"],46485:[],46680:[],4669:[],46800:[],4697:[],46997:[],47166:[],47319:[],47425:[],47746:[],47750:[],47812:[],47874:[],47887:[],47966:[],48087:[],48350:[],48395:[],48407:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_plugins_guide_setup-function_mdx"],48947:[],4897:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_plugins_guide_setup-function_mdx"],49139:[],49317:[],49545:[],49597:[],49689:[],49828:[],49930:[],5011:[],50409:[],50598:[],50775:[],50811:[],50918:[],50967:[],51012:[],5134:[],51349:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_api_config_testing_md"],51563:[],51791:[],51811:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_plugins_official-list_plugin-babel_md"],52256:[],52326:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_guide_intro_getting-started_md"],52534:[],53159:[],53325:[],5340:[],53472:[],53481:[],53600:[],53713:[],54008:[],54011:[],54070:[],54233:[],5442:["default~docs_en_guide_faq_build_mdx~docs_en_guide_faq_storybook_mdx~docs_en_guide_faq_test_md~931d29"],54477:[],54555:[],5474:[],54905:[],54947:[],55190:[],55665:["default~docs_en_guide_faq_build_mdx~docs_en_guide_faq_storybook_mdx~docs_en_guide_faq_test_md~931d29"],55962:[],55980:[],56022:[],56145:[],56231:[],56470:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_plugins_official-list_plugin-node-polyfill_md"],56747:[],56856:[],56979:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_plugins_official-list_plugin-banner_md"],58050:[],58220:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_guide_advance_theme-config_mdx"],58598:[],5872:[],58795:[],58879:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_api_config_build-config_md"],59142:[],59195:[],59359:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_guide_advance_external-dependency_mdx"],59513:[],59770:[],5978:[],59823:[],59882:[],59934:[],60035:["docs_zh_plugins_official-list_overview_md"],60241:[],60343:[],60455:[],60499:[],60564:[],60599:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_guide_basic_test-your-project_mdx"],61034:[],61117:[],61313:[],61785:[],61820:[],61839:[],61919:[],61976:[],62157:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_guide_advance_copy_md"],62191:[],62263:[],62450:[],62568:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","default~docs_en_guide_faq_build_mdx~docs_en_guide_faq_storybook_mdx~docs_en_guide_faq_test_md~931d29","docs_en_guide_faq_build_mdx"],62573:[],6263:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","default~docs_en_guide_faq_build_mdx~docs_en_guide_faq_storybook_mdx~docs_en_guide_faq_test_md~931d29","docs_en_guide_faq_storybook_mdx"],63159:[],63373:[],63604:[],63897:[],63981:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_plugins_official-list_plugin-polyfill_md"],64043:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","default~docs_en_guide_faq_build_mdx~docs_en_guide_faq_storybook_mdx~docs_en_guide_faq_test_md~931d29","docs_zh_guide_faq_storybook_mdx"],64314:[],64442:[],64846:[],64871:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_api_config_build-preset_mdx"],64934:[],64956:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_guide_basic_using-storybook_mdx"],64977:[],6498:[],65167:[],65845:[],6601:[],66605:[],67363:[],67404:[],67417:[],67429:[],67684:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_guide_advance_asset_mdx"],6798:["default~docs_en_guide_faq_build_mdx~docs_en_guide_faq_storybook_mdx~docs_en_guide_faq_test_md~931d29"],67991:[],68279:[],68427:[],68537:[],69129:[],69183:["default~docs_en_guide_faq_build_mdx~docs_en_guide_faq_storybook_mdx~docs_en_guide_faq_test_md~931d29"],69424:[],69561:[],69668:[],69870:[],70196:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_plugins_guide_getting-started_mdx"],70220:[],70365:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_plugins_official-list_plugin-banner_md"],70481:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_plugins_official-list_plugin-node-polyfill_md"],70555:[],70714:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_guide_basic_before-getting-started_md"],70863:[],7093:[],71152:[],71203:[],71347:[],71527:[],71765:[],71815:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_guide_intro_getting-started_md"],71870:[],72296:[],72758:[],73027:[],73196:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_plugins_official-list_plugin-polyfill_md"],73218:[],7342:[],73450:[],73514:[],73653:[],73789:[],73960:[],73987:[],74381:[],74457:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_guide_basic_use-micro-generator_md"],7472:[],75191:[],75240:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_plugins_guide_plugin-object_mdx"],75271:[],75367:[],75639:[],757:[],75796:[],76280:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_api_config_dev_md"],76318:[],76550:[],76596:[],76629:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_guide_basic_use-micro-generator_md"],76716:[],77075:[],77175:[],77247:[],7797:[],78153:[],78171:[],7830:[],7833:[],7836:[],78844:[],79018:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_plugins_official-list_plugin-babel_md"],79316:["docs_zh_api_index_md"],79561:[],79712:[],80051:[],80209:[],80260:[],80613:[],80748:[],80749:[],80785:[],80866:[],80955:[],81125:[],81150:["default~docs_en_guide_faq_build_mdx~docs_en_guide_faq_storybook_mdx~docs_en_guide_faq_test_md~931d29","docs_zh_guide_faq_test_mdx"],8130:[],81680:[],82431:[],82739:[],82863:[],82970:[],83668:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_api_config_dev_md"],83746:[],83821:[],83834:[],83937:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","default~docs_en_guide_faq_build_mdx~docs_en_guide_faq_storybook_mdx~docs_en_guide_faq_test_md~931d29","docs_zh_guide_faq_build_mdx"],84386:[],8442:[],84623:[],84641:[],84642:[],84716:[],84755:[],8495:[],85015:[],85028:[],85221:[],85300:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_guide_advance_build-umd_mdx"],85349:[],8572:[],85826:[],85844:[],85849:[],85894:[],85936:[],8607:[],86668:[],86967:["default~docs_en_guide_faq_build_mdx~docs_en_guide_faq_storybook_mdx~docs_en_guide_faq_test_md~931d29","docs_en_guide_faq_test_mdx"],87442:[],87674:["docs_zh_guide_intro_why-module-engineering-solution_md"],8773:[],87894:[],8793:[],8837:["default~docs_en_guide_faq_build_mdx~docs_en_guide_faq_storybook_mdx~docs_en_guide_faq_test_md~931d29"],88429:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_api_config_design-system_md"],88627:[],88628:[],88655:[],89053:[],89280:[],89455:[],89943:[],89967:[],90312:[],90323:[],90388:[],9044:[],90544:[],90573:[],90683:[],91032:[],91237:[],91259:[],913:[],91328:[],91345:[],91544:[],91862:[],91940:[],92077:[],92128:[],92484:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_guide_advance_in-depth-about-dev-command_md"],9254:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_zh_plugins_official-list_plugin-import_mdx"],92581:[],92646:[],92945:[],93231:[],93233:["docs_en_guide_intro_welcome_md"],93395:[],93696:[],93810:[],93871:[],93907:[],93965:[],9425:[],94369:[],94787:[],94958:[],95028:[],95060:[],95076:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_guide_basic_before-getting-started_md"],9538:[],95588:[],95603:[],95737:[],95907:[],96051:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_api_config_build-config_md"],96072:[],96266:[],96349:[],96357:[],96558:[],9669:[],96826:[],96858:[],96918:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_guide_advance_in-depth-about-build_md"],9700:[],9704:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_guide_basic_modify-output-product_md"],9733:[],97359:[],97415:[],97699:[],97729:[],97766:[],97919:[],98207:["defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be","docs_en_guide_basic_publish-your-project_md"],98217:[],98226:[],98326:[],99179:[],99408:[],99553:[],9968:[],99765:[]},f.el=function(d){var s=_[d];return void 0===s?Promise.resolve():s.length>1?Promise.all(s.map(f.e)):f.e(s[0])},f.f={},f.e=function(_){return Promise.all(Object.keys(f.f).reduce(function(d,s){return f.f[s](_,d),d},[]))},f.p="/module-tools/",f.u=function(_){return({"default~docs_en_guide_faq_build_mdx~docs_en_guide_faq_storybook_mdx~docs_en_guide_faq_test_md~931d29":"static/js/async/default~docs_en_guide_faq_build_mdx~docs_en_guide_faq_storybook_mdx~docs_en_guide_faq_test_md~931d29.a2443c41.js","docs_en_api_config_build-config_md":"static/js/async/docs_en_api_config_build-config_md.47c13184.js","docs_en_api_config_build-preset_mdx":"static/js/async/docs_en_api_config_build-preset_mdx.240d175b.js","docs_en_api_config_design-system_md":"static/js/async/docs_en_api_config_design-system_md.b2ec1ff7.js",docs_en_api_config_dev_md:"static/js/async/docs_en_api_config_dev_md.6ad208aa.js",docs_en_api_config_plugins_md:"static/js/async/docs_en_api_config_plugins_md.da21c1a9.js",docs_en_api_config_testing_md:"static/js/async/docs_en_api_config_testing_md.5655d56b.js",docs_en_api_index_md:"static/js/async/docs_en_api_index_md.b332bf64.js","docs_en_api_plugin-api_plugin-hooks_md":"static/js/async/docs_en_api_plugin-api_plugin-hooks_md.b0f73e0d.js",docs_en_guide_advance_asset_mdx:"static/js/async/docs_en_guide_advance_asset_mdx.d302e90c.js","docs_en_guide_advance_build-umd_mdx":"static/js/async/docs_en_guide_advance_build-umd_mdx.554fa073.js",docs_en_guide_advance_copy_md:"static/js/async/docs_en_guide_advance_copy_md.78b33f73.js","docs_en_guide_advance_external-dependency_mdx":"static/js/async/docs_en_guide_advance_external-dependency_mdx.507e4091.js","docs_en_guide_advance_in-depth-about-build_md":"static/js/async/docs_en_guide_advance_in-depth-about-build_md.207e8b25.js","docs_en_guide_advance_in-depth-about-dev-command_md":"static/js/async/docs_en_guide_advance_in-depth-about-dev-command_md.72d6b6fc.js","docs_en_guide_advance_theme-config_mdx":"static/js/async/docs_en_guide_advance_theme-config_mdx.168a5eec.js","docs_en_guide_basic_before-getting-started_md":"static/js/async/docs_en_guide_basic_before-getting-started_md.a00933ab.js","docs_en_guide_basic_command-preview_md":"static/js/async/docs_en_guide_basic_command-preview_md.5e63d7ad.js","docs_en_guide_basic_modify-output-product_md":"static/js/async/docs_en_guide_basic_modify-output-product_md.abd250e1.js","docs_en_guide_basic_publish-your-project_md":"static/js/async/docs_en_guide_basic_publish-your-project_md.3b098b03.js","docs_en_guide_basic_test-your-project_mdx":"static/js/async/docs_en_guide_basic_test-your-project_mdx.b86e9b69.js","docs_en_guide_basic_use-micro-generator_md":"static/js/async/docs_en_guide_basic_use-micro-generator_md.e03b16c8.js","docs_en_guide_basic_using-storybook_mdx":"static/js/async/docs_en_guide_basic_using-storybook_mdx.32e9b389.js","docs_en_guide_best-practices_components_mdx":"static/js/async/docs_en_guide_best-practices_components_mdx.a56e369b.js",docs_en_guide_faq_build_mdx:"static/js/async/docs_en_guide_faq_build_mdx.81c243c7.js",docs_en_guide_faq_index_md:"static/js/async/docs_en_guide_faq_index_md.85367f4a.js",docs_en_guide_faq_storybook_mdx:"static/js/async/docs_en_guide_faq_storybook_mdx.d6b26cfd.js",docs_en_guide_faq_test_mdx:"static/js/async/docs_en_guide_faq_test_mdx.a7a1c8b5.js","docs_en_guide_intro_getting-started_md":"static/js/async/docs_en_guide_intro_getting-started_md.7c901798.js",docs_en_guide_intro_welcome_md:"static/js/async/docs_en_guide_intro_welcome_md.69fe3324.js","docs_en_guide_intro_why-module-engineering-solution_md":"static/js/async/docs_en_guide_intro_why-module-engineering-solution_md.766afaee.js",docs_en_index_md:"static/js/async/docs_en_index_md.32415ad9.js","docs_en_plugins_guide_getting-started_mdx":"static/js/async/docs_en_plugins_guide_getting-started_mdx.c6631fd6.js","docs_en_plugins_guide_plugin-object_mdx":"static/js/async/docs_en_plugins_guide_plugin-object_mdx.0971cbdb.js","docs_en_plugins_guide_setup-function_mdx":"static/js/async/docs_en_plugins_guide_setup-function_mdx.388d92b1.js","docs_en_plugins_official-list_overview_md":"static/js/async/docs_en_plugins_official-list_overview_md.9390ed67.js","docs_en_plugins_official-list_plugin-babel_md":"static/js/async/docs_en_plugins_official-list_plugin-babel_md.0528b729.js","docs_en_plugins_official-list_plugin-banner_md":"static/js/async/docs_en_plugins_official-list_plugin-banner_md.c14f8599.js","docs_en_plugins_official-list_plugin-import_mdx":"static/js/async/docs_en_plugins_official-list_plugin-import_mdx.67bac7e1.js","docs_en_plugins_official-list_plugin-node-polyfill_md":"static/js/async/docs_en_plugins_official-list_plugin-node-polyfill_md.19819cf5.js","docs_en_plugins_official-list_plugin-polyfill_md":"static/js/async/docs_en_plugins_official-list_plugin-polyfill_md.473537df.js","docs_zh_api_config_build-config_md":"static/js/async/docs_zh_api_config_build-config_md.e52b0287.js","docs_zh_api_config_build-preset_mdx":"static/js/async/docs_zh_api_config_build-preset_mdx.8b874378.js","docs_zh_api_config_design-system_md":"static/js/async/docs_zh_api_config_design-system_md.ceae6914.js",docs_zh_api_config_dev_md:"static/js/async/docs_zh_api_config_dev_md.033094f8.js",docs_zh_api_config_plugins_md:"static/js/async/docs_zh_api_config_plugins_md.ab43b516.js",docs_zh_api_config_testing_md:"static/js/async/docs_zh_api_config_testing_md.2c1f171d.js",docs_zh_api_index_md:"static/js/async/docs_zh_api_index_md.5df1b9d0.js","docs_zh_api_plugin-api_plugin-hooks_md":"static/js/async/docs_zh_api_plugin-api_plugin-hooks_md.9f155180.js",docs_zh_guide_advance_asset_mdx:"static/js/async/docs_zh_guide_advance_asset_mdx.0b551e5e.js","docs_zh_guide_advance_build-umd_mdx":"static/js/async/docs_zh_guide_advance_build-umd_mdx.4c0a741d.js",docs_zh_guide_advance_copy_md:"static/js/async/docs_zh_guide_advance_copy_md.ff70ddd3.js","docs_zh_guide_advance_external-dependency_mdx":"static/js/async/docs_zh_guide_advance_external-dependency_mdx.64bae82a.js","docs_zh_guide_advance_in-depth-about-build_md":"static/js/async/docs_zh_guide_advance_in-depth-about-build_md.d16f07b4.js","docs_zh_guide_advance_in-depth-about-dev-command_md":"static/js/async/docs_zh_guide_advance_in-depth-about-dev-command_md.2eabb853.js","docs_zh_guide_advance_theme-config_mdx":"static/js/async/docs_zh_guide_advance_theme-config_mdx.5670e00b.js","docs_zh_guide_basic_before-getting-started_md":"static/js/async/docs_zh_guide_basic_before-getting-started_md.3e23f82e.js","docs_zh_guide_basic_command-preview_md":"static/js/async/docs_zh_guide_basic_command-preview_md.718669ed.js","docs_zh_guide_basic_modify-output-product_md":"static/js/async/docs_zh_guide_basic_modify-output-product_md.bea77add.js","docs_zh_guide_basic_publish-your-project_md":"static/js/async/docs_zh_guide_basic_publish-your-project_md.b0c63699.js","docs_zh_guide_basic_test-your-project_mdx":"static/js/async/docs_zh_guide_basic_test-your-project_mdx.b9ee0af4.js","docs_zh_guide_basic_use-micro-generator_md":"static/js/async/docs_zh_guide_basic_use-micro-generator_md.ad32d392.js","docs_zh_guide_basic_using-storybook_mdx":"static/js/async/docs_zh_guide_basic_using-storybook_mdx.2748f6f6.js","docs_zh_guide_best-practices_components_mdx":"static/js/async/docs_zh_guide_best-practices_components_mdx.e4450a3c.js",docs_zh_guide_faq_build_mdx:"static/js/async/docs_zh_guide_faq_build_mdx.470ca09d.js",docs_zh_guide_faq_index_md:"static/js/async/docs_zh_guide_faq_index_md.9c5738a8.js",docs_zh_guide_faq_storybook_mdx:"static/js/async/docs_zh_guide_faq_storybook_mdx.e1fb8e18.js",docs_zh_guide_faq_test_mdx:"static/js/async/docs_zh_guide_faq_test_mdx.d332b61f.js","docs_zh_guide_intro_getting-started_md":"static/js/async/docs_zh_guide_intro_getting-started_md.8af35ffc.js",docs_zh_guide_intro_welcome_md:"static/js/async/docs_zh_guide_intro_welcome_md.6169850d.js","docs_zh_guide_intro_why-module-engineering-solution_md":"static/js/async/docs_zh_guide_intro_why-module-engineering-solution_md.ff0f5ef0.js",docs_zh_index_md:"static/js/async/docs_zh_index_md.bc7e2f02.js","docs_zh_plugins_guide_getting-started_mdx":"static/js/async/docs_zh_plugins_guide_getting-started_mdx.6a2c07ee.js","docs_zh_plugins_guide_plugin-object_mdx":"static/js/async/docs_zh_plugins_guide_plugin-object_mdx.9a665baa.js","docs_zh_plugins_guide_setup-function_mdx":"static/js/async/docs_zh_plugins_guide_setup-function_mdx.a614b224.js","docs_zh_plugins_official-list_overview_md":"static/js/async/docs_zh_plugins_official-list_overview_md.bf4a7405.js","docs_zh_plugins_official-list_plugin-babel_md":"static/js/async/docs_zh_plugins_official-list_plugin-babel_md.7107a66b.js","docs_zh_plugins_official-list_plugin-banner_md":"static/js/async/docs_zh_plugins_official-list_plugin-banner_md.4443ae99.js","docs_zh_plugins_official-list_plugin-import_mdx":"static/js/async/docs_zh_plugins_official-list_plugin-import_mdx.e4923a9a.js","docs_zh_plugins_official-list_plugin-node-polyfill_md":"static/js/async/docs_zh_plugins_official-list_plugin-node-polyfill_md.26c9cb0d.js","docs_zh_plugins_official-list_plugin-polyfill_md":"static/js/async/docs_zh_plugins_official-list_plugin-polyfill_md.0bda701d.js"})[_]},f.k=function(_){return({"default~docs_en_guide_faq_build_mdx~docs_en_guide_faq_storybook_mdx~docs_en_guide_faq_test_md~931d29":"static/css/async/default~docs_en_guide_faq_build_mdx~docs_en_guide_faq_storybook_mdx~docs_en_guide_faq_test_md~931d29.d9ac876f.css","docs_en_api_config_build-config_md":"static/css/async/docs_en_api_config_build-config_md.d9ac876f.css","docs_en_api_config_build-preset_mdx":"static/css/async/docs_en_api_config_build-preset_mdx.d9ac876f.css","docs_en_api_config_design-system_md":"static/css/async/docs_en_api_config_design-system_md.d9ac876f.css",docs_en_api_config_dev_md:"static/css/async/docs_en_api_config_dev_md.d9ac876f.css",docs_en_api_config_plugins_md:"static/css/async/docs_en_api_config_plugins_md.d9ac876f.css",docs_en_api_config_testing_md:"static/css/async/docs_en_api_config_testing_md.d9ac876f.css",docs_en_api_index_md:"static/css/async/docs_en_api_index_md.d9ac876f.css","docs_en_api_plugin-api_plugin-hooks_md":"static/css/async/docs_en_api_plugin-api_plugin-hooks_md.d9ac876f.css",docs_en_guide_advance_asset_mdx:"static/css/async/docs_en_guide_advance_asset_mdx.d9ac876f.css","docs_en_guide_advance_build-umd_mdx":"static/css/async/docs_en_guide_advance_build-umd_mdx.d9ac876f.css",docs_en_guide_advance_copy_md:"static/css/async/docs_en_guide_advance_copy_md.d9ac876f.css","docs_en_guide_advance_external-dependency_mdx":"static/css/async/docs_en_guide_advance_external-dependency_mdx.d9ac876f.css","docs_en_guide_advance_in-depth-about-build_md":"static/css/async/docs_en_guide_advance_in-depth-about-build_md.d9ac876f.css","docs_en_guide_advance_in-depth-about-dev-command_md":"static/css/async/docs_en_guide_advance_in-depth-about-dev-command_md.d9ac876f.css","docs_en_guide_advance_theme-config_mdx":"static/css/async/docs_en_guide_advance_theme-config_mdx.d9ac876f.css","docs_en_guide_basic_before-getting-started_md":"static/css/async/docs_en_guide_basic_before-getting-started_md.d9ac876f.css","docs_en_guide_basic_command-preview_md":"static/css/async/docs_en_guide_basic_command-preview_md.d9ac876f.css","docs_en_guide_basic_modify-output-product_md":"static/css/async/docs_en_guide_basic_modify-output-product_md.d9ac876f.css","docs_en_guide_basic_publish-your-project_md":"static/css/async/docs_en_guide_basic_publish-your-project_md.d9ac876f.css","docs_en_guide_basic_test-your-project_mdx":"static/css/async/docs_en_guide_basic_test-your-project_mdx.d9ac876f.css","docs_en_guide_basic_use-micro-generator_md":"static/css/async/docs_en_guide_basic_use-micro-generator_md.d9ac876f.css","docs_en_guide_basic_using-storybook_mdx":"static/css/async/docs_en_guide_basic_using-storybook_mdx.d9ac876f.css","docs_en_guide_best-practices_components_mdx":"static/css/async/docs_en_guide_best-practices_components_mdx.d9ac876f.css",docs_en_guide_faq_build_mdx:"static/css/async/docs_en_guide_faq_build_mdx.d9ac876f.css",docs_en_guide_faq_index_md:"static/css/async/docs_en_guide_faq_index_md.d9ac876f.css",docs_en_guide_faq_storybook_mdx:"static/css/async/docs_en_guide_faq_storybook_mdx.d9ac876f.css",docs_en_guide_faq_test_mdx:"static/css/async/docs_en_guide_faq_test_mdx.d9ac876f.css","docs_en_guide_intro_getting-started_md":"static/css/async/docs_en_guide_intro_getting-started_md.d9ac876f.css",docs_en_guide_intro_welcome_md:"static/css/async/docs_en_guide_intro_welcome_md.d9ac876f.css","docs_en_guide_intro_why-module-engineering-solution_md":"static/css/async/docs_en_guide_intro_why-module-engineering-solution_md.d9ac876f.css",docs_en_index_md:"static/css/async/docs_en_index_md.d9ac876f.css","docs_en_plugins_guide_getting-started_mdx":"static/css/async/docs_en_plugins_guide_getting-started_mdx.d9ac876f.css","docs_en_plugins_guide_plugin-object_mdx":"static/css/async/docs_en_plugins_guide_plugin-object_mdx.d9ac876f.css","docs_en_plugins_guide_setup-function_mdx":"static/css/async/docs_en_plugins_guide_setup-function_mdx.d9ac876f.css","docs_en_plugins_official-list_overview_md":"static/css/async/docs_en_plugins_official-list_overview_md.d9ac876f.css","docs_en_plugins_official-list_plugin-babel_md":"static/css/async/docs_en_plugins_official-list_plugin-babel_md.d9ac876f.css","docs_en_plugins_official-list_plugin-banner_md":"static/css/async/docs_en_plugins_official-list_plugin-banner_md.d9ac876f.css","docs_en_plugins_official-list_plugin-import_mdx":"static/css/async/docs_en_plugins_official-list_plugin-import_mdx.d9ac876f.css","docs_en_plugins_official-list_plugin-node-polyfill_md":"static/css/async/docs_en_plugins_official-list_plugin-node-polyfill_md.d9ac876f.css","docs_en_plugins_official-list_plugin-polyfill_md":"static/css/async/docs_en_plugins_official-list_plugin-polyfill_md.d9ac876f.css","docs_zh_api_config_build-config_md":"static/css/async/docs_zh_api_config_build-config_md.d9ac876f.css","docs_zh_api_config_build-preset_mdx":"static/css/async/docs_zh_api_config_build-preset_mdx.d9ac876f.css","docs_zh_api_config_design-system_md":"static/css/async/docs_zh_api_config_design-system_md.d9ac876f.css",docs_zh_api_config_dev_md:"static/css/async/docs_zh_api_config_dev_md.d9ac876f.css",docs_zh_api_config_plugins_md:"static/css/async/docs_zh_api_config_plugins_md.d9ac876f.css",docs_zh_api_config_testing_md:"static/css/async/docs_zh_api_config_testing_md.d9ac876f.css",docs_zh_api_index_md:"static/css/async/docs_zh_api_index_md.d9ac876f.css","docs_zh_api_plugin-api_plugin-hooks_md":"static/css/async/docs_zh_api_plugin-api_plugin-hooks_md.d9ac876f.css",docs_zh_guide_advance_asset_mdx:"static/css/async/docs_zh_guide_advance_asset_mdx.d9ac876f.css","docs_zh_guide_advance_build-umd_mdx":"static/css/async/docs_zh_guide_advance_build-umd_mdx.d9ac876f.css",docs_zh_guide_advance_copy_md:"static/css/async/docs_zh_guide_advance_copy_md.d9ac876f.css","docs_zh_guide_advance_external-dependency_mdx":"static/css/async/docs_zh_guide_advance_external-dependency_mdx.d9ac876f.css","docs_zh_guide_advance_in-depth-about-build_md":"static/css/async/docs_zh_guide_advance_in-depth-about-build_md.d9ac876f.css","docs_zh_guide_advance_in-depth-about-dev-command_md":"static/css/async/docs_zh_guide_advance_in-depth-about-dev-command_md.d9ac876f.css","docs_zh_guide_advance_theme-config_mdx":"static/css/async/docs_zh_guide_advance_theme-config_mdx.d9ac876f.css","docs_zh_guide_basic_before-getting-started_md":"static/css/async/docs_zh_guide_basic_before-getting-started_md.d9ac876f.css","docs_zh_guide_basic_command-preview_md":"static/css/async/docs_zh_guide_basic_command-preview_md.d9ac876f.css","docs_zh_guide_basic_modify-output-product_md":"static/css/async/docs_zh_guide_basic_modify-output-product_md.d9ac876f.css","docs_zh_guide_basic_publish-your-project_md":"static/css/async/docs_zh_guide_basic_publish-your-project_md.d9ac876f.css","docs_zh_guide_basic_test-your-project_mdx":"static/css/async/docs_zh_guide_basic_test-your-project_mdx.d9ac876f.css","docs_zh_guide_basic_use-micro-generator_md":"static/css/async/docs_zh_guide_basic_use-micro-generator_md.d9ac876f.css","docs_zh_guide_basic_using-storybook_mdx":"static/css/async/docs_zh_guide_basic_using-storybook_mdx.d9ac876f.css","docs_zh_guide_best-practices_components_mdx":"static/css/async/docs_zh_guide_best-practices_components_mdx.d9ac876f.css",docs_zh_guide_faq_build_mdx:"static/css/async/docs_zh_guide_faq_build_mdx.d9ac876f.css",docs_zh_guide_faq_index_md:"static/css/async/docs_zh_guide_faq_index_md.d9ac876f.css",docs_zh_guide_faq_storybook_mdx:"static/css/async/docs_zh_guide_faq_storybook_mdx.d9ac876f.css",docs_zh_guide_faq_test_mdx:"static/css/async/docs_zh_guide_faq_test_mdx.d9ac876f.css","docs_zh_guide_intro_getting-started_md":"static/css/async/docs_zh_guide_intro_getting-started_md.d9ac876f.css",docs_zh_guide_intro_welcome_md:"static/css/async/docs_zh_guide_intro_welcome_md.d9ac876f.css","docs_zh_guide_intro_why-module-engineering-solution_md":"static/css/async/docs_zh_guide_intro_why-module-engineering-solution_md.d9ac876f.css",docs_zh_index_md:"static/css/async/docs_zh_index_md.d9ac876f.css","docs_zh_plugins_guide_getting-started_mdx":"static/css/async/docs_zh_plugins_guide_getting-started_mdx.d9ac876f.css","docs_zh_plugins_guide_plugin-object_mdx":"static/css/async/docs_zh_plugins_guide_plugin-object_mdx.d9ac876f.css","docs_zh_plugins_guide_setup-function_mdx":"static/css/async/docs_zh_plugins_guide_setup-function_mdx.d9ac876f.css","docs_zh_plugins_official-list_overview_md":"static/css/async/docs_zh_plugins_official-list_overview_md.d9ac876f.css","docs_zh_plugins_official-list_plugin-babel_md":"static/css/async/docs_zh_plugins_official-list_plugin-babel_md.d9ac876f.css","docs_zh_plugins_official-list_plugin-banner_md":"static/css/async/docs_zh_plugins_official-list_plugin-banner_md.d9ac876f.css","docs_zh_plugins_official-list_plugin-import_mdx":"static/css/async/docs_zh_plugins_official-list_plugin-import_mdx.d9ac876f.css","docs_zh_plugins_official-list_plugin-node-polyfill_md":"static/css/async/docs_zh_plugins_official-list_plugin-node-polyfill_md.d9ac876f.css","docs_zh_plugins_official-list_plugin-polyfill_md":"static/css/async/docs_zh_plugins_official-list_plugin-polyfill_md.d9ac876f.css"})[_]},d={},f.l=function(_,s,e,c){if(void 0!==e){for(var i,n,o=document.getElementsByTagName("script"),a=0;a<o.length;a++){var t=o[a];if(t.getAttribute("src")==_){i=t;break}}}!i&&(n=!0,(i=document.createElement("script")).charset="utf-8",i.timeout=120,i.src=_),d[_]=[s];var u=function(s,e){i.onerror=i.onload=null,clearTimeout(g);var c=d[_];if(delete d[_],i.parentNode&&i.parentNode.removeChild(i),c&&c.forEach(function(_){return _(e)}),s)return s(e)},g=setTimeout(u.bind(null,void 0,{type:"timeout",target:i}),12e4);i.onerror=u.bind(null,i.onerror),i.onload=u.bind(null,i.onload),n&&document.head.appendChild(i)},f.o=function(_,d){return Object.prototype.hasOwnProperty.call(_,d)},s=[],f.O=function(_,d,e,c){if(d){c=c||0;for(var i=s.length;i>0&&s[i-1][2]>c;i--)s[i]=s[i-1];s[i]=[d,e,c];return}for(var n=1/0,i=0;i<s.length;i++){for(var d=s[i][0],e=s[i][1],c=s[i][2],o=!0,a=0;a<d.length;a++)n>=c&&Object.keys(f.O).every(function(_){return f.O[_](d[a])})?d.splice(a--,1):(o=!1,c<n&&(n=c));if(o){s.splice(i--,1);var t=e();void 0!==t&&(_=t)}}return _},f.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||Function("return this")()}catch(_){if("object"==typeof window)return window}}(),e={"builder-runtime":0},f.f.j=function(_,d){var s=f.o(e,_)?e[_]:void 0;if(0!==s){if(s)d.push(s[2]);else if(_){var c=new Promise(function(d,c){s=e[_]=[d,c]});d.push(s[2]=c);var i=f.p+f.u(_),n=Error();f.l(i,function(d){if(f.o(e,_)&&(0!==(s=e[_])&&(e[_]=void 0),s)){var c=d&&("load"===d.type?"missing":d.type),i=d&&d.target&&d.target.src;n.message="Loading chunk "+_+" failed.\n("+c+": "+i+")",n.name="ChunkLoadError",n.type=c,n.request=i,s[1](n)}},"chunk-"+_,_)}else e[_]=0}},f.O.j=function(_){return 0===e[_]},c=function(_,d){var s=d[0],c=d[1],i=d[2],n,o,a=0;if(s.some(function(_){return 0!==e[_]})){for(n in c)f.o(c,n)&&(f.m[n]=c[n]);if(i)var t=i(f)}for(_&&_(d);a<s.length;a++)o=s[a],f.o(e,o)&&e[o]&&e[o][0](),e[o]=0;return f.O(t)},i=self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[],i.forEach(c.bind(null,0)),i.push=c.bind(null,i.push.bind(i)),n={"defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be":0,main:0},o="webpack",a="data-webpack-loading",t=function(_,d,s,e){var c,i,n="chunk-"+_;if(!e){for(var t=document.getElementsByTagName("link"),u=0;u<t.length;u++){var g=t[u],l=g.getAttribute("href")||g.href;if(l&&!l.startsWith(f.p)&&(l=f.p+(l.startsWith("/")?l.slice(1):l)),"stylesheet"==g.rel&&(l&&l.startsWith(d)||g.getAttribute("data-webpack")==o+":"+n)){c=g;break}}if(!s)return c}!c&&(i=!0,(c=document.createElement("link")).setAttribute("data-webpack",o+":"+n),c.setAttribute(a,1),c.rel="stylesheet",c.href=d);var m=function(_,d){if(c.onerror=c.onload=null,c.removeAttribute(a),clearTimeout(p),d&&"load"!=d.type&&c.parentNode.removeChild(c),s(d),_)return _(d)};if(c.getAttribute(a)){var p=setTimeout(m.bind(null,void 0,{type:"timeout",target:c}),12e4);c.onerror=m.bind(null,c.onerror),c.onload=m.bind(null,c.onload)}else m(void 0,{type:"load",target:c});return e?document.head.insertBefore(c,e):i&&document.head.appendChild(c),c},f.f.css=function(_,d){var s=f.o(n,_)?n[_]:void 0;if(0!==s){if(s)d.push(s[2]);else if([].indexOf(_)>-1){var e=new Promise(function(d,e){s=n[_]=[d,e]});d.push(s[2]=e);var c=f.p+f.k(_),i=Error();t(_,c,function(d){if(f.o(n,_)&&(0!==(s=n[_])&&(n[_]=void 0),s)){if("load"!==d.type){var e=d&&d.type,c=d&&d.target&&d.target.src;i.message="Loading css chunk "+_+" failed.\n("+e+": "+c+")",i.name="ChunkLoadError",i.type=e,i.request=c,s[1](i)}else s[0]()}})}else n[_]=0}}}();</script><script defer="defer" src="/module-tools/static/js/lib-react.87879e53.js"></script><script defer="defer" src="/module-tools/static/js/lib-lodash.20527186.js"></script><script defer="defer" src="/module-tools/static/js/lib-polyfill.a99fdfae.js"></script><script defer="defer" src="/module-tools/static/js/lib-router.65b37e4a.js"></script><script defer="defer" src="/module-tools/static/js/defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be.7070a8dd.js"></script><script defer="defer" src="/module-tools/static/js/main.42725889.js"></script><link href="/module-tools/static/css/defaultVendors~docs_en_api_config_build-config_md~docs_en_api_config_build-preset_mdx~docs_en~2cd1be.71af0621.css" rel="stylesheet"><link href="/module-tools/static/css/main.1e1c5ea3.css" rel="stylesheet"></head><body><div id="root"><div><header class="top-0 left-0 md:fixed w-full" style="z-index:var(--modern-z-index-nav);background:var(--modern-c-bg)"><div class="navContainer_cc721 modern-doc-nav px-6"><div class="container_cc721 flex justify-between items-center h-full"><div class="undefined"><a href="/module-tools/" class="flex items-center w-full h-full text-base font-semibold transition-opacity duration-300 hover:opacity-60"><span>Module Tools</span></a></div><div class="undefined flex flex-1 justify-end items-center"><div class="leftNav_cc721"><div class="menu h-14"></div></div><div class="rightNav_cc721"><div class="flex sm:flex-1 items-center sm:pl-4 sm:pr-2"><div class="navSearchButton_22838"><button><svg width="18" height="24" viewBox="0 0 32 32" hight="18"><path fill="var(--modern-c-gray)" d="m29 27.586-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9 9.01 9.01 0 0 1-9-9Z"></path></svg><p class="searchWord_22838">Search Docs</p><div><span>⌘</span><span>K</span></div></button></div><div class="mobileNavSearchButton_22838"><svg width="24" height="24" viewBox="0 0 32 32"><path fill="var(--modern-c-gray)" d="m29 27.586-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9 9.01 9.01 0 0 1-9-9Z"></path></svg></div></div><div class="menu h-14"><a class="link_2a8f5  cursor-pointer" target="" href="/module-tools/guide/intro/welcome.html"><div class="singleItem_cc721  text-sm font-medium mx-1.5 px-3 py-2">指南</div></a><a class="link_2a8f5  cursor-pointer" target="" href="/module-tools/api/index.html"><div class="singleItem_cc721 activeItem_cc721 text-sm font-medium mx-1.5 px-3 py-2">API</div></a><a class="link_2a8f5  cursor-pointer" target="" href="/module-tools/plugins/guide/getting-started.html"><div class="singleItem_cc721  text-sm font-medium mx-1.5 px-3 py-2">插件</div></a><div class="mx-3 last:mr-0"><div class="relative flex-center h-14"><button class="nav-menu-group-button flex-center items-center font-medium text-sm text-text-1 hover:text-text-2 transition-colors duration-200"><span class="text-sm font-medium" style="margin-right:2px">v2.25.1</span><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path></svg></button><div class="nav-menu-group-content absolute mx-0.8 transition-opacity duration-300" style="opacity:0;visibility:hidden;right:0;top:52px"><div class="p-3 pr-2 w-full h-full max-h-100vh whitespace-nowrap" style="box-shadow:var(--modern-shadow-3);z-index:100;border:1px solid var(--modern-c-divider-light);border-radius:2rem;background:var(--modern-c-bg)"><div><div class="font-medium my-1"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="link_2a8f5 "><div class="rounded-2xl hover:bg-mute" style="padding:0.4rem 1.5rem 0.4rem 0.75rem"><div class="flex"><span>更新日志</span></div></div></a></div></div><div><div class="font-medium my-1"><a href="https://modernjs.dev/en/community/contributing-guide.html" target="_blank" rel="noopener noreferrer" class="link_2a8f5 "><div class="rounded-2xl hover:bg-mute" style="padding:0.4rem 1.5rem 0.4rem 0.75rem"><div class="flex"><span>贡献指南</span></div></div></a></div></div></div></div></div></div></div><div class="flex-center flex-row"><div class="translation menu-item_cc721 flex text-sm font-bold items-center px-3 py-2"><div><div class="relative flex-center h-14"><button class="nav-menu-group-button flex-center items-center font-medium text-sm text-text-1 hover:text-text-2 transition-colors duration-200"><span class="text-sm font-medium" style="margin-right:2px"><svg width="18" height="18" viewBox="0 0 32 32" style="with:18px;height:18px"><path fill="currentColor" d="M27.85 29H30l-6-15h-2.35l-6 15h2.15l1.6-4h6.85zm-7.65-6 2.62-6.56L25.45 23zM18 7V5h-7V2H9v3H2v2h10.74a14.71 14.71 0 0 1-3.19 6.18A13.5 13.5 0 0 1 7.26 9h-2.1a16.47 16.47 0 0 0 3 5.58A16.84 16.84 0 0 1 3 18l.75 1.86A18.47 18.47 0 0 0 9.53 16a16.92 16.92 0 0 0 5.76 3.84L16 18a14.48 14.48 0 0 1-5.12-3.37A17.64 17.64 0 0 0 14.8 7z"></path></svg></span><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path></svg></button><div class="nav-menu-group-content absolute mx-0.8 transition-opacity duration-300" style="opacity:0;visibility:hidden;right:0;top:52px"><div class="p-3 pr-2 w-full h-full max-h-100vh whitespace-nowrap" style="box-shadow:var(--modern-shadow-3);z-index:100;border:1px solid var(--modern-c-divider-light);border-radius:2rem;background:var(--modern-c-bg)"><div><div class="rounded-2xl my-1" style="padding:0.4rem 1.5rem 0.4rem 0.75rem"><span class="text-brand">简体中文</span></div></div><div><div class="font-medium my-1"><a class="link_2a8f5  cursor-pointer" target="" href="/module-tools/en/api/config/design-system.html"><div class="rounded-2xl hover:bg-mute" style="padding:0.4rem 1.5rem 0.4rem 0.75rem"><div class="flex"><span>English</span></div></div></a></div></div></div></div></div></div></div><div class="mx-2"><div class="md:mr-2 modern-nav-appearance"><div class="p-1 border border-solid border-gray-300 text-gray-400  cursor-pointer rounded-md hover:border-gray-600 hover:text-gray-600 dark:hover:border-gray-200 dark:hover:text-gray-200 transition-all duration-300"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M12 18c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6zm0-10c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zM12 4c-.6 0-1-.4-1-1V1c0-.6.4-1 1-1s1 .4 1 1v2c0 .6-.4 1-1 1zM12 24c-.6 0-1-.4-1-1v-2c0-.6.4-1 1-1s1 .4 1 1v2c0 .6-.4 1-1 1zM5.6 6.6c-.3 0-.5-.1-.7-.3L3.5 4.9c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l1.4 1.4c.4.4.4 1 0 1.4-.1.2-.4.3-.7.3zM19.8 20.8c-.3 0-.5-.1-.7-.3l-1.4-1.4c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l1.4 1.4c.4.4.4 1 0 1.4-.2.2-.5.3-.7.3zM3 13H1c-.6 0-1-.4-1-1s.4-1 1-1h2c.6 0 1 .4 1 1s-.4 1-1 1zM23 13h-2c-.6 0-1-.4-1-1s.4-1 1-1h2c.6 0 1 .4 1 1s-.4 1-1 1zM4.2 20.8c-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1.4-1.4c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-1.4 1.4c-.2.2-.4.3-.7.3zM18.4 6.6c-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l1.4-1.4c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-1.4 1.4c-.2.2-.5.3-.7.3z"></path></svg></div></div></div><div class="social-links menu-item_4e3f0 flex-center relative"><div class="flex-center h-full gap-x-4 transition-colors duration-300 md:mr-2"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools" target="_blank" rel="noopener noreferrer" class="social-links"><div class="social-links-icon_4e3f0"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></div></a></div></div></div></div><div class="mobileNavMenu_cc721"><div class="navScreen_4eb57 " id="navScreen"><div class="container_4eb57"><div class="navMenu_4eb57"><div class="navMenuItem_4eb57 w-full"><a class="link_2a8f5  cursor-pointer" target="" href="/module-tools/guide/intro/welcome.html"><div class="singleItem_cc721  text-sm font-medium mx-1.5 px-3 py-2">指南</div></a></div><div class="navMenuItem_4eb57 w-full"><a class="link_2a8f5  cursor-pointer" target="" href="/module-tools/api/index.html"><div class="singleItem_cc721 activeItem_cc721 text-sm font-medium mx-1.5 px-3 py-2">API</div></a></div><div class="navMenuItem_4eb57 w-full"><a class="link_2a8f5  cursor-pointer" target="" href="/module-tools/plugins/guide/getting-started.html"><div class="singleItem_cc721  text-sm font-medium mx-1.5 px-3 py-2">插件</div></a></div><div class="navMenuItem_4eb57 w-full"><div class="mx-3 last:mr-0"><div class=" navScreenMenuGroup_169ad relative"><button class="button_169ad"><span class="buttonSpan_169ad">v2.25.1</span><svg width="1em" height="1em" viewBox="0 0 32 32" class=" down_169ad "><path fill="currentColor" d="M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path></svg></button><div><div class="items_169ad"><div><div class="py-1 font-medium"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="link_2a8f5 "><div><div class="flex justify-center"><span>更新日志</span></div></div></a></div></div><div><div class="py-1 font-medium"><a href="https://modernjs.dev/en/community/contributing-guide.html" target="_blank" rel="noopener noreferrer" class="link_2a8f5 "><div><div class="flex justify-center"><span>贡献指南</span></div></div></a></div></div></div></div></div></div></div></div><div class="flex-center flex-col gap-2"><div class="mt-2 navAppearance_4eb57 flex justify-center"></div><div class="undefined flex text-sm font-bold justify-center"><div class="mx-1.5 my-1"><div class=" navScreenMenuGroup_169ad relative"><button class="button_169ad"><span class="buttonSpan_169ad"><svg width="18" height="18" viewBox="0 0 32 32" style="width:18px;height:18px"><path fill="currentColor" d="M27.85 29H30l-6-15h-2.35l-6 15h2.15l1.6-4h6.85zm-7.65-6 2.62-6.56L25.45 23zM18 7V5h-7V2H9v3H2v2h10.74a14.71 14.71 0 0 1-3.19 6.18A13.5 13.5 0 0 1 7.26 9h-2.1a16.47 16.47 0 0 0 3 5.58A16.84 16.84 0 0 1 3 18l.75 1.86A18.47 18.47 0 0 0 9.53 16a16.92 16.92 0 0 0 5.76 3.84L16 18a14.48 14.48 0 0 1-5.12-3.37A17.64 17.64 0 0 0 14.8 7z"></path></svg></span><svg width="1em" height="1em" viewBox="0 0 32 32" class=" down_169ad "><path fill="currentColor" d="M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z"></path></svg></button><div><div class="items_169ad"><div><div class="p-1"><span class="text-brand">简体中文</span></div></div><div><div class="py-1 font-medium"><a class="link_2a8f5  cursor-pointer" target="" href="/module-tools/en.html"><div><div class="flex justify-center"><span>English</span></div></div></a></div></div></div></div></div></div></div><div class="social-links menu-item_4e3f0 flex-center relative"><div class="flex-center h-full gap-x-4 transition-colors duration-300 md:mr-2"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/solutions/module-tools" target="_blank" rel="noopener noreferrer" class="social-links"><div class="social-links-icon_4e3f0"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg></div></a></div></div></div></div></div><button class=" navHamburger_41e74 text-gray-500"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor"><circle cx="8" cy="16" r="2" fill="currentColor"></circle><circle cx="16" cy="16" r="2" fill="currentColor"></circle><circle cx="24" cy="16" r="2" fill="currentColor"></circle></svg></button></div></div></div></div></header><section><div class="docLayout_12c7d pt-0 md:mt-14"><div class="localNav_159b7"><button class="menu_159b7 flex-center"><div class="text-md mr-2"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M4 6h24v2H4zm0 18h24v2H4zm0-12h24v2H4zm0 6h24v2H4z"></path></svg></div><span class="text-sm">Menu</span></button></div><aside class="sidebar_3b941 modern-sidebar "><div class="mt-1 sidebarContent_3b941"><div class="modern-scrollbar" style="max-height:calc(100vh - var(--modern-nav-height) - 8px);overflow:scroll"><nav class="pb-6"><a class="link_2a8f5 menuLink_3b941 cursor-pointer" target="" href="/module-tools/api/index.html"><div class="menuItem_3b941 mt-1 py-1.5 px-3 block rounded-xl font-medium" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;margin-left:0">概览</div></a><section class="mt-1 block" style="margin-left:0"><div style="cursor:pointer" class="flex justify-between items-center rounded-xl menuItem_3b941"><h2 class="py-1 px-2 text-sm font-medium ml-1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">配置项</h2><div class="collapseContainer_3b941 p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="transition-opacity duration-500 ease-in-out" style="opacity:1"><div><a class="link_2a8f5 menuLink_3b941 cursor-pointer" target="" href="/module-tools/api/config/build-config.html"><div class="menuItem_3b941 mt-1 py-1.5 px-3 block rounded-xl font-medium" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;margin-left:12px">buildConfig</div></a></div><div><a class="link_2a8f5 menuLink_3b941 cursor-pointer" target="" href="/module-tools/api/config/build-preset.html"><div class="menuItem_3b941 mt-1 py-1.5 px-3 block rounded-xl font-medium" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;margin-left:12px">buildPreset</div></a></div><div><a class="link_2a8f5 menuLink_3b941 cursor-pointer" target="" href="/module-tools/api/config/design-system.html"><div class="menuItemActive_3b941 mt-1 py-1.5 px-3 block rounded-xl font-medium" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;margin-left:12px">designSystem</div></a></div><div><a class="link_2a8f5 menuLink_3b941 cursor-pointer" target="" href="/module-tools/api/config/dev.html"><div class="menuItem_3b941 mt-1 py-1.5 px-3 block rounded-xl font-medium" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;margin-left:12px">dev</div></a></div><div><a class="link_2a8f5 menuLink_3b941 cursor-pointer" target="" href="/module-tools/api/config/plugins.html"><div class="menuItem_3b941 mt-1 py-1.5 px-3 block rounded-xl font-medium" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;margin-left:12px">plugins</div></a></div><div><a class="link_2a8f5 menuLink_3b941 cursor-pointer" target="" href="/module-tools/api/config/testing.html"><div class="menuItem_3b941 mt-1 py-1.5 px-3 block rounded-xl font-medium" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;margin-left:12px">testing</div></a></div></div></div></section><section class="mt-1 block" style="margin-left:0"><div style="cursor:pointer" class="flex justify-between items-center rounded-xl menuItem_3b941"><h2 class="py-1 px-2 text-sm font-medium ml-1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Plugin API</h2><div class="collapseContainer_3b941 p-2 rounded-xl"><div style="cursor:pointer;transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16 12 26l-1.4-1.4 8.6-8.6-8.6-8.6L12 6z"></path></svg></div></div></div><div class="transition-all duration-300 ease-in-out" style="overflow:hidden"><div class="transition-opacity duration-500 ease-in-out" style="opacity:1"><div><a class="link_2a8f5 menuLink_3b941 cursor-pointer" target="" href="/module-tools/api/plugin-api/plugin-hooks.html"><div class="menuItem_3b941 mt-1 py-1.5 px-3 block rounded-xl font-medium" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;margin-left:12px">Plugin Hooks</div></a></div></div></div></section></nav></div></div></aside><div class="content_12c7d flex flex-shrink-0"><div class="w-full"><div class="modern-doc"><!--$--><h1 id="designsystem" class="text-3xl mb-10 leading-10 tracking-tight title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#designsystem">#</a>designSystem</h1>
-<p class="my-4 leading-7">本章描述了有关 designSystem 相关的配置。</p>
-<div class="modern-directive tip"><div class="modern-directive-title">TIP</div><div class="modern-directive-content"><p class="my-4 leading-7">
-需要先通过 <code>pnpm run new</code>启用 Tailwind CSS 功能。</p></div></div>
-<ul class="list-disc pl-5 my-4 leading-7">
-<li class="[&amp;:not(:first-child)]:mt-2">类型：<code>object</code></li>
-<li class="[&amp;:not(:first-child)]:mt-2">默认值: <code>见下方配置详情</code>。</li>
-</ul>
-<!-- -->
-<div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>const designSystem = {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  screens: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    sm: &#x27;640px&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    md: &#x27;768px&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    lg: &#x27;1024px&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    xl: &#x27;1280px&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  colors: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    transparent: &#x27;transparent&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    current: &#x27;currentColor&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    black: &#x27;#000&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    white: &#x27;#fff&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    gray: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      100: &#x27;#f7fafc&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      200: &#x27;#edf2f7&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      300: &#x27;#e2e8f0&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      400: &#x27;#cbd5e0&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      500: &#x27;#a0aec0&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      600: &#x27;#718096&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      700: &#x27;#4a5568&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      800: &#x27;#2d3748&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      900: &#x27;#1a202c&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    red: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      100: &#x27;#fff5f5&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      200: &#x27;#fed7d7&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      300: &#x27;#feb2b2&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      400: &#x27;#fc8181&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      500: &#x27;#f56565&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      600: &#x27;#e53e3e&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      700: &#x27;#c53030&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      800: &#x27;#9b2c2c&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      900: &#x27;#742a2a&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    orange: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      100: &#x27;#fffaf0&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      200: &#x27;#feebc8&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      300: &#x27;#fbd38d&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      400: &#x27;#f6ad55&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      500: &#x27;#ed8936&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      600: &#x27;#dd6b20&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      700: &#x27;#c05621&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      800: &#x27;#9c4221&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      900: &#x27;#7b341e&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    yellow: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      100: &#x27;#fffff0&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      200: &#x27;#fefcbf&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      300: &#x27;#faf089&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      400: &#x27;#f6e05e&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      500: &#x27;#ecc94b&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      600: &#x27;#d69e2e&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      700: &#x27;#b7791f&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      800: &#x27;#975a16&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      900: &#x27;#744210&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    green: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      100: &#x27;#f0fff4&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      200: &#x27;#c6f6d5&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      300: &#x27;#9ae6b4&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      400: &#x27;#68d391&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      500: &#x27;#48bb78&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      600: &#x27;#38a169&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      700: &#x27;#2f855a&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      800: &#x27;#276749&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      900: &#x27;#22543d&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    teal: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      100: &#x27;#e6fffa&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      200: &#x27;#b2f5ea&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      300: &#x27;#81e6d9&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      400: &#x27;#4fd1c5&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      500: &#x27;#38b2ac&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      600: &#x27;#319795&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      700: &#x27;#2c7a7b&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      800: &#x27;#285e61&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      900: &#x27;#234e52&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    blue: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      100: &#x27;#ebf8ff&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      200: &#x27;#bee3f8&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      300: &#x27;#90cdf4&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      400: &#x27;#63b3ed&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      500: &#x27;#4299e1&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      600: &#x27;#3182ce&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      700: &#x27;#2b6cb0&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      800: &#x27;#2c5282&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      900: &#x27;#2a4365&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    indigo: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      100: &#x27;#ebf4ff&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      200: &#x27;#c3dafe&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      300: &#x27;#a3bffa&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      400: &#x27;#7f9cf5&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      500: &#x27;#667eea&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      600: &#x27;#5a67d8&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      700: &#x27;#4c51bf&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      800: &#x27;#434190&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      900: &#x27;#3c366b&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    purple: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      100: &#x27;#faf5ff&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      200: &#x27;#e9d8fd&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      300: &#x27;#d6bcfa&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      400: &#x27;#b794f4&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      500: &#x27;#9f7aea&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      600: &#x27;#805ad5&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      700: &#x27;#6b46c1&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      800: &#x27;#553c9a&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      900: &#x27;#44337a&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    pink: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      100: &#x27;#fff5f7&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      200: &#x27;#fed7e2&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      300: &#x27;#fbb6ce&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      400: &#x27;#f687b3&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      500: &#x27;#ed64a6&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      600: &#x27;#d53f8c&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      700: &#x27;#b83280&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      800: &#x27;#97266d&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      900: &#x27;#702459&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  spacing: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    px: &#x27;1px&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    0: &#x27;0&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    1: &#x27;0.25rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    2: &#x27;0.5rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    3: &#x27;0.75rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    4: &#x27;1rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    5: &#x27;1.25rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    6: &#x27;1.5rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    8: &#x27;2rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    10: &#x27;2.5rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    12: &#x27;3rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    16: &#x27;4rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    20: &#x27;5rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    24: &#x27;6rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    32: &#x27;8rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    40: &#x27;10rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    48: &#x27;12rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    56: &#x27;14rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    64: &#x27;16rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  backgroundColor: theme =&gt; theme(&#x27;colors&#x27;),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  backgroundOpacity: theme =&gt; theme(&#x27;opacity&#x27;),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  backgroundPosition: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    bottom: &#x27;bottom&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    center: &#x27;center&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    left: &#x27;left&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;left-bottom&#x27;: &#x27;left bottom&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;left-top&#x27;: &#x27;left top&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    right: &#x27;right&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;right-bottom&#x27;: &#x27;right bottom&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;right-top&#x27;: &#x27;right top&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    top: &#x27;top&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  backgroundSize: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    auto: &#x27;auto&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    cover: &#x27;cover&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    contain: &#x27;contain&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  borderColor: theme =&gt; ({</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    ...theme(&#x27;colors&#x27;),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    default: theme(&#x27;colors.gray.300&#x27;, &#x27;currentColor&#x27;),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  }),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  borderOpacity: theme =&gt; theme(&#x27;opacity&#x27;),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  borderRadius: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    none: &#x27;0&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    sm: &#x27;0.125rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    default: &#x27;0.25rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    md: &#x27;0.375rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    lg: &#x27;0.5rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    full: &#x27;9999px&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  borderWidth: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    default: &#x27;1px&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    0: &#x27;0&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    2: &#x27;2px&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    4: &#x27;4px&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    8: &#x27;8px&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  boxShadow: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    xs: &#x27;0 0 0 1px rgba(0, 0, 0, 0.05)&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    sm: &#x27;0 1px 2px 0 rgba(0, 0, 0, 0.05)&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    default: &#x27;0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    md: &#x27;0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    lg: &#x27;0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    xl: &#x27;0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;2xl&#x27;: &#x27;0 25px 50px -12px rgba(0, 0, 0, 0.25)&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    inner: &#x27;inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    outline: &#x27;0 0 0 3px rgba(66, 153, 225, 0.5)&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    none: &#x27;none&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  container: {},</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  cursor: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    auto: &#x27;auto&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    default: &#x27;default&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    pointer: &#x27;pointer&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    wait: &#x27;wait&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    text: &#x27;text&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    move: &#x27;move&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;not-allowed&#x27;: &#x27;not-allowed&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  divideColor: theme =&gt; theme(&#x27;borderColor&#x27;),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  divideOpacity: theme =&gt; theme(&#x27;borderOpacity&#x27;),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  divideWidth: theme =&gt; theme(&#x27;borderWidth&#x27;),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  fill: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    current: &#x27;currentColor&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  flex: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    1: &#x27;1 1 0%&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    auto: &#x27;1 1 auto&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    initial: &#x27;0 1 auto&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    none: &#x27;none&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  flexGrow: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    0: &#x27;0&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    default: &#x27;1&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  flexShrink: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    0: &#x27;0&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    default: &#x27;1&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  fontFamily: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    sans: [</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      &#x27;system-ui&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      &#x27;-apple-system&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      &#x27;BlinkMacSystemFont&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      &#x27;&quot;Segoe UI&quot;&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      &#x27;Roboto&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      &#x27;&quot;Helvetica Neue&quot;&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      &#x27;Arial&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      &#x27;&quot;Noto Sans&quot;&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      &#x27;sans-serif&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      &#x27;&quot;Apple Color Emoji&quot;&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      &#x27;&quot;Segoe UI Emoji&quot;&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      &#x27;&quot;Segoe UI Symbol&quot;&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      &#x27;&quot;Noto Color Emoji&quot;&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    ],</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    serif: [&#x27;Georgia&#x27;, &#x27;Cambria&#x27;, &#x27;&quot;Times New Roman&quot;&#x27;, &#x27;Times&#x27;, &#x27;serif&#x27;],</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    mono: [</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      &#x27;Menlo&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      &#x27;Monaco&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      &#x27;Consolas&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      &#x27;&quot;Liberation Mono&quot;&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      &#x27;&quot;Courier New&quot;&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      &#x27;monospace&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    ],</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  fontSize: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    xs: &#x27;0.75rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    sm: &#x27;0.875rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    base: &#x27;1rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    lg: &#x27;1.125rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    xl: &#x27;1.25rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;2xl&#x27;: &#x27;1.5rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;3xl&#x27;: &#x27;1.875rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;4xl&#x27;: &#x27;2.25rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;5xl&#x27;: &#x27;3rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;6xl&#x27;: &#x27;4rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  fontWeight: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    hairline: &#x27;100&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    thin: &#x27;200&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    light: &#x27;300&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    normal: &#x27;400&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    medium: &#x27;500&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    semibold: &#x27;600&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    bold: &#x27;700&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    extrabold: &#x27;800&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    black: &#x27;900&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  height: theme =&gt; ({</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    auto: &#x27;auto&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    ...theme(&#x27;spacing&#x27;),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    full: &#x27;100%&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    screen: &#x27;100vh&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  }),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  inset: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    0: &#x27;0&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    auto: &#x27;auto&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  letterSpacing: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    tighter: &#x27;-0.05em&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    tight: &#x27;-0.025em&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    normal: &#x27;0&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    wide: &#x27;0.025em&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    wider: &#x27;0.05em&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    widest: &#x27;0.1em&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  lineHeight: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    none: &#x27;1&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    tight: &#x27;1.25&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    snug: &#x27;1.375&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    normal: &#x27;1.5&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    relaxed: &#x27;1.625&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    loose: &#x27;2&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    3: &#x27;.75rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    4: &#x27;1rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    5: &#x27;1.25rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    6: &#x27;1.5rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    7: &#x27;1.75rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    8: &#x27;2rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    9: &#x27;2.25rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    10: &#x27;2.5rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  listStyleType: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    none: &#x27;none&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    disc: &#x27;disc&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    decimal: &#x27;decimal&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  margin: (theme, { negative }) =&gt; ({</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    auto: &#x27;auto&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    ...theme(&#x27;spacing&#x27;),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    ...negative(theme(&#x27;spacing&#x27;)),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  }),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  maxHeight: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    full: &#x27;100%&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    screen: &#x27;100vh&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  maxWidth: (theme, { breakpoints }) =&gt; ({</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    none: &#x27;none&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    xs: &#x27;20rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    sm: &#x27;24rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    md: &#x27;28rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    lg: &#x27;32rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    xl: &#x27;36rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;2xl&#x27;: &#x27;42rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;3xl&#x27;: &#x27;48rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;4xl&#x27;: &#x27;56rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;5xl&#x27;: &#x27;64rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;6xl&#x27;: &#x27;72rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    full: &#x27;100%&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    ...breakpoints(theme(&#x27;screens&#x27;)),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  }),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  minHeight: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    0: &#x27;0&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    full: &#x27;100%&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    screen: &#x27;100vh&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  minWidth: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    0: &#x27;0&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    full: &#x27;100%&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  objectPosition: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    bottom: &#x27;bottom&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    center: &#x27;center&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    left: &#x27;left&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;left-bottom&#x27;: &#x27;left bottom&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;left-top&#x27;: &#x27;left top&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    right: &#x27;right&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;right-bottom&#x27;: &#x27;right bottom&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;right-top&#x27;: &#x27;right top&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    top: &#x27;top&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  opacity: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    0: &#x27;0&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    25: &#x27;0.25&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    50: &#x27;0.5&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    75: &#x27;0.75&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    100: &#x27;1&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  order: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    first: &#x27;-9999&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    last: &#x27;9999&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    none: &#x27;0&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    1: &#x27;1&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    2: &#x27;2&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    3: &#x27;3&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    4: &#x27;4&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    5: &#x27;5&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    6: &#x27;6&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    7: &#x27;7&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    8: &#x27;8&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    9: &#x27;9&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    10: &#x27;10&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    11: &#x27;11&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    12: &#x27;12&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  padding: theme =&gt; theme(&#x27;spacing&#x27;),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  placeholderColor: theme =&gt; theme(&#x27;colors&#x27;),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  placeholderOpacity: theme =&gt; theme(&#x27;opacity&#x27;),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  space: (theme, { negative }) =&gt; ({</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    ...theme(&#x27;spacing&#x27;),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    ...negative(theme(&#x27;spacing&#x27;)),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  }),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  stroke: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    current: &#x27;currentColor&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  strokeWidth: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    0: &#x27;0&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    1: &#x27;1&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    2: &#x27;2&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  textColor: theme =&gt; theme(&#x27;colors&#x27;),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  textOpacity: theme =&gt; theme(&#x27;opacity&#x27;),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  width: theme =&gt; ({</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    auto: &#x27;auto&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    ...theme(&#x27;spacing&#x27;),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;1/2&#x27;: &#x27;50%&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;1/3&#x27;: &#x27;33.333333%&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;2/3&#x27;: &#x27;66.666667%&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;1/4&#x27;: &#x27;25%&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;2/4&#x27;: &#x27;50%&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;3/4&#x27;: &#x27;75%&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;1/5&#x27;: &#x27;20%&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;2/5&#x27;: &#x27;40%&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;3/5&#x27;: &#x27;60%&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;4/5&#x27;: &#x27;80%&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;1/6&#x27;: &#x27;16.666667%&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;2/6&#x27;: &#x27;33.333333%&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;3/6&#x27;: &#x27;50%&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;4/6&#x27;: &#x27;66.666667%&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;5/6&#x27;: &#x27;83.333333%&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;1/12&#x27;: &#x27;8.333333%&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;2/12&#x27;: &#x27;16.666667%&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;3/12&#x27;: &#x27;25%&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;4/12&#x27;: &#x27;33.333333%&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;5/12&#x27;: &#x27;41.666667%&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;6/12&#x27;: &#x27;50%&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;7/12&#x27;: &#x27;58.333333%&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;8/12&#x27;: &#x27;66.666667%&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;9/12&#x27;: &#x27;75%&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;10/12&#x27;: &#x27;83.333333%&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;11/12&#x27;: &#x27;91.666667%&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    full: &#x27;100%&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    screen: &#x27;100vw&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  }),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  zIndex: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    auto: &#x27;auto&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    0: &#x27;0&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    10: &#x27;10&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    20: &#x27;20&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    30: &#x27;30&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    40: &#x27;40&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    50: &#x27;50&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  gap: theme =&gt; theme(&#x27;spacing&#x27;),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  gridTemplateColumns: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    none: &#x27;none&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    1: &#x27;repeat(1, minmax(0, 1fr))&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    2: &#x27;repeat(2, minmax(0, 1fr))&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    3: &#x27;repeat(3, minmax(0, 1fr))&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    4: &#x27;repeat(4, minmax(0, 1fr))&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    5: &#x27;repeat(5, minmax(0, 1fr))&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    6: &#x27;repeat(6, minmax(0, 1fr))&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    7: &#x27;repeat(7, minmax(0, 1fr))&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    8: &#x27;repeat(8, minmax(0, 1fr))&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    9: &#x27;repeat(9, minmax(0, 1fr))&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    10: &#x27;repeat(10, minmax(0, 1fr))&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    11: &#x27;repeat(11, minmax(0, 1fr))&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    12: &#x27;repeat(12, minmax(0, 1fr))&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  gridColumn: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    auto: &#x27;auto&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;span-1&#x27;: &#x27;span 1 / span 1&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;span-2&#x27;: &#x27;span 2 / span 2&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;span-3&#x27;: &#x27;span 3 / span 3&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;span-4&#x27;: &#x27;span 4 / span 4&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;span-5&#x27;: &#x27;span 5 / span 5&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;span-6&#x27;: &#x27;span 6 / span 6&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;span-7&#x27;: &#x27;span 7 / span 7&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;span-8&#x27;: &#x27;span 8 / span 8&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;span-9&#x27;: &#x27;span 9 / span 9&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;span-10&#x27;: &#x27;span 10 / span 10&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;span-11&#x27;: &#x27;span 11 / span 11&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;span-12&#x27;: &#x27;span 12 / span 12&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  gridColumnStart: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    auto: &#x27;auto&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    1: &#x27;1&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    2: &#x27;2&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    3: &#x27;3&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    4: &#x27;4&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    5: &#x27;5&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    6: &#x27;6&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    7: &#x27;7&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    8: &#x27;8&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    9: &#x27;9&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    10: &#x27;10&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    11: &#x27;11&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    12: &#x27;12&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    13: &#x27;13&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  gridColumnEnd: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    auto: &#x27;auto&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    1: &#x27;1&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    2: &#x27;2&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    3: &#x27;3&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    4: &#x27;4&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    5: &#x27;5&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    6: &#x27;6&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    7: &#x27;7&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    8: &#x27;8&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    9: &#x27;9&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    10: &#x27;10&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    11: &#x27;11&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    12: &#x27;12&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    13: &#x27;13&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  gridTemplateRows: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    none: &#x27;none&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    1: &#x27;repeat(1, minmax(0, 1fr))&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    2: &#x27;repeat(2, minmax(0, 1fr))&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    3: &#x27;repeat(3, minmax(0, 1fr))&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    4: &#x27;repeat(4, minmax(0, 1fr))&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    5: &#x27;repeat(5, minmax(0, 1fr))&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    6: &#x27;repeat(6, minmax(0, 1fr))&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  gridRow: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    auto: &#x27;auto&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;span-1&#x27;: &#x27;span 1 / span 1&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;span-2&#x27;: &#x27;span 2 / span 2&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;span-3&#x27;: &#x27;span 3 / span 3&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;span-4&#x27;: &#x27;span 4 / span 4&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;span-5&#x27;: &#x27;span 5 / span 5&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;span-6&#x27;: &#x27;span 6 / span 6&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  gridRowStart: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    auto: &#x27;auto&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    1: &#x27;1&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    2: &#x27;2&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    3: &#x27;3&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    4: &#x27;4&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    5: &#x27;5&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    6: &#x27;6&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    7: &#x27;7&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  gridRowEnd: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    auto: &#x27;auto&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    1: &#x27;1&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    2: &#x27;2&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    3: &#x27;3&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    4: &#x27;4&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    5: &#x27;5&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    6: &#x27;6&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    7: &#x27;7&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  transformOrigin: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    center: &#x27;center&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    top: &#x27;top&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;top-right&#x27;: &#x27;top right&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    right: &#x27;right&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;bottom-right&#x27;: &#x27;bottom right&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    bottom: &#x27;bottom&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;bottom-left&#x27;: &#x27;bottom left&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    left: &#x27;left&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;top-left&#x27;: &#x27;top left&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  scale: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    0: &#x27;0&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    50: &#x27;.5&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    75: &#x27;.75&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    90: &#x27;.9&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    95: &#x27;.95&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    100: &#x27;1&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    105: &#x27;1.05&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    110: &#x27;1.1&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    125: &#x27;1.25&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    150: &#x27;1.5&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  rotate: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;-180&#x27;: &#x27;-180deg&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;-90&#x27;: &#x27;-90deg&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;-45&#x27;: &#x27;-45deg&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    0: &#x27;0&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    45: &#x27;45deg&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    90: &#x27;90deg&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    180: &#x27;180deg&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  translate: (theme, { negative }) =&gt; ({</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    ...theme(&#x27;spacing&#x27;),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    ...negative(theme(&#x27;spacing&#x27;)),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;-full&#x27;: &#x27;-100%&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;-1/2&#x27;: &#x27;-50%&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;1/2&#x27;: &#x27;50%&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    full: &#x27;100%&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  }),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  skew: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;-12&#x27;: &#x27;-12deg&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;-6&#x27;: &#x27;-6deg&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;-3&#x27;: &#x27;-3deg&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    0: &#x27;0&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    3: &#x27;3deg&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    6: &#x27;6deg&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    12: &#x27;12deg&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  transitionProperty: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    none: &#x27;none&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    all: &#x27;all&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    default:</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      &#x27;background-color, border-color, color, fill, stroke, opacity, box-shadow, transform&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    colors: &#x27;background-color, border-color, color, fill, stroke&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    opacity: &#x27;opacity&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    shadow: &#x27;box-shadow&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    transform: &#x27;transform&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  transitionTimingFunction: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    linear: &#x27;linear&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    in: &#x27;cubic-bezier(0.4, 0, 1, 1)&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    out: &#x27;cubic-bezier(0, 0, 0.2, 1)&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;in-out&#x27;: &#x27;cubic-bezier(0.4, 0, 0.2, 1)&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  transitionDuration: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    75: &#x27;75ms&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    100: &#x27;100ms&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    150: &#x27;150ms&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    200: &#x27;200ms&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    300: &#x27;300ms&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    500: &#x27;500ms&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    700: &#x27;700ms&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    1000: &#x27;1000ms&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  transitionDelay: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    75: &#x27;75ms&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    100: &#x27;100ms&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    150: &#x27;150ms&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    200: &#x27;200ms&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    300: &#x27;300ms&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    500: &#x27;500ms&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    700: &#x27;700ms&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    1000: &#x27;1000ms&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><br/></code></div></div>
-<div class="modern-directive tip"><div class="modern-directive-title">TIP</div><div class="modern-directive-content"><p class="my-4 leading-7">
-更多关于<a href="https://tailwindcss.com/docs/configuration#theme" target="_blank" rel="noopener noreferrer" class="link_2d294 undefined">TailwindCSS 配置</a></p></div></div>
-<!-- -->
-<p class="my-4 leading-7"><code>designSystem</code> 用于定义项目的调色板、排版比例（Typographic Scales 或者 Type Scale）、字体列表、断点、边框圆角值等等。因为 Modern.js 借用了 Tailwind Theme 的设计方式，并且内部也集成了 Tailwind CSS，所以 <code>designSystem</code> 使用方式与 Tailwind CSS Theme 相同</p>
-<p class="my-4 leading-7"><code>designSystem</code> 对象包含 <code>screens</code>、<code>colors</code> 和 <code>spacing</code> 的属性，以及每个可自定义核心插件。</p>
-<h2 id="screens" class="mt-14 mb-6 text-2xl tracking-tight title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#screens">#</a>Screens</h2>
-<p class="my-4 leading-7">使用<code>screens</code> 可以自定义项目中的响应断点：</p>
-<div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>const designSystem = {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  screens: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    sm: &#x27;640px&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    md: &#x27;768px&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    lg: &#x27;1024px&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    xl: &#x27;1280px&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><br/></code></div></div>
-<p class="my-4 leading-7">其中 <code>screens</code> 对象里的属性名是屏幕名称（用作 <code>Tailwind CSS</code> 生成的自适应实用程序变体的前缀，例如 <code>md:text-center</code>），值是该断点应在其开始的 <code>min-width</code>。</p>
-<p class="my-4 leading-7">默认断点受常见设备分辨率的启发：</p>
-<div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>const designSystem = {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  screens: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    sm: &#x27;640px&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    // =&gt; @media (min-width: 640px) { ... }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    md: &#x27;768px&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    // =&gt; @media (min-width: 768px) { ... }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    lg: &#x27;1024px&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    // =&gt; @media (min-width: 1024px) { ... }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    xl: &#x27;1280px&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    // =&gt; @media (min-width: 1280px) { ... }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><br/></code></div></div>
-<p class="my-4 leading-7">你可以在你的项目中使用任意你喜欢的名称作为断点的属性：</p>
-<div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>const designSystem = {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  screens: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    tablet: &#x27;640px&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    // =&gt; @media (min-width: 640px) { ... }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    laptop: &#x27;1024px&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    // =&gt; @media (min-width: 1024px) { ... }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    desktop: &#x27;1280px&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    // =&gt; @media (min-width: 1280px) { ... }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><br/></code></div></div>
-<p class="my-4 leading-7">这些屏幕名称反映在 <code>utilities</code> 中，因此 <code>text-center</code> 现在是这样的：</p>
-<div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>.text-center {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  text-align: center;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>@media (min-width: 640px) {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  .tablet\:text-center {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    text-align: center;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>@media (min-width: 1024px) {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  .laptop\:text-center {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    text-align: center;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>@media (min-width: 1280px) {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  .desktop\:text-center {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    text-align: center;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><br/></code></div></div>
-<h3 id="max-width-断点" class="mt-10 mb-2 leading-7 text-xl title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#max-width-断点">#</a>Max-width 断点</h3>
-<p class="my-4 leading-7">如果要使用 <code>max-width</code> 断点而不是 <code>min-width</code>，可以将屏幕指定为具有 <code>max</code> 属性的对象：</p>
-<div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>const designSystem = {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  screens: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    xl: { max: &#x27;1279px&#x27; },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    // =&gt; @media (max-width: 1279px) { ... }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    lg: { max: &#x27;1023px&#x27; },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    // =&gt; @media (max-width: 1023px) { ... }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    md: { max: &#x27;767px&#x27; },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    // =&gt; @media (max-width: 767px) { ... }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    sm: { max: &#x27;639px&#x27; },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    // =&gt; @media (max-width: 639px) { ... }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><br/></code></div></div>
-<p class="my-4 leading-7">如有必要，以创建带有 <code>min-width</code> 和 <code>max-width</code> 定义的断点，例如：</p>
-<div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>const designSystem = {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  screens: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    sm: { min: &#x27;640px&#x27;, max: &#x27;767px&#x27; },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    md: { min: &#x27;768px&#x27;, max: &#x27;1023px&#x27; },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    lg: { min: &#x27;1024px&#x27;, max: &#x27;1279px&#x27; },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    xl: { min: &#x27;1280px&#x27; },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><br/></code></div></div>
-<h3 id="多个范围的断点" class="mt-10 mb-2 leading-7 text-xl title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#多个范围的断点">#</a>多个范围的断点</h3>
-<p class="my-4 leading-7">有时，将单个断点定义应用于多个范围会很有用。</p>
-<p class="my-4 leading-7">例如，假设您有一个 <code>sidebar</code>，并且希望断点基于内容区域宽度而不是整个视口。您可以模拟这种情况，当 <code>sidebar</code> 可见并缩小内容区域时，断点的样式使用较小的断点样式：</p>
-<div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>const designSystem = {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  screens: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    sm: &#x27;500px&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    md: [</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      // Sidebar appears at 768px, so revert to `sm:` styles between 768px</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      // and 868px, after which the main content area is wide enough again to</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      // apply the `md:` styles.</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      { min: &#x27;668px&#x27;, max: &#x27;767px&#x27; },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      { min: &#x27;868px&#x27; },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    ],</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    lg: &#x27;1100px&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    xl: &#x27;1400px&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><br/></code></div></div>
-<h3 id="自定义媒体查询" class="mt-10 mb-2 leading-7 text-xl title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#自定义媒体查询">#</a>自定义媒体查询</h3>
-<p class="my-4 leading-7">如果需要为断点提供完全自定义的媒体查询，则可以使用带有 <code>raw</code> 属性的对象：</p>
-<div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>const designSystem = {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  extend: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    screens: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      portrait: { raw: &#x27;(orientation: portrait)&#x27; },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      // =&gt; @media (orientation: portrait) { ... }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><br/></code></div></div>
-<h3 id="print-样式" class="mt-10 mb-2 leading-7 text-xl title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#print-样式">#</a>Print 样式</h3>
-<p class="my-4 leading-7">如果需要为打印应用不同的样式，则 <code>raw</code> 选项可能特别有用。</p>
-<p class="my-4 leading-7">需要做的就是在 <code>designSystem.extend.screens</code> 下添加一个 <code>print</code>：</p>
-<div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>const designSystem = {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  extend: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    screens: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      print: { raw: &#x27;print&#x27; },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      // =&gt; @media print { ... }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><br/></code></div></div>
-<p class="my-4 leading-7">然后，可以使用诸如 <code>print:text-black</code> 之类的类来指定仅当某人尝试打印页面时才应用的样式：</p>
-<div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>&lt;div class=&quot;text-gray-700 print:text-black&quot;&gt;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  &lt;!-- ... --&gt;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>&lt;/div&gt;</span></div></div><br/></code></div></div>
-<h3 id="dark-mode" class="mt-10 mb-2 leading-7 text-xl title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#dark-mode">#</a>Dark Mode</h3>
-<p class="my-4 leading-7"><code>raw</code> 选项可以用于实现 “暗模式” 屏幕：</p>
-<div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>const designSystem = {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  extend: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    screens: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      dark: { raw: &#x27;(prefers-color-scheme: dark)&#x27; },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      // =&gt; @media (prefers-color-scheme: dark) { ... }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><br/></code></div></div>
-<p class="my-4 leading-7">然后，您可以使用 <code>dark:</code> 前缀在暗模式下为元素设置不同的样式：</p>
-<div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>&lt;div class=&quot;text-gray-700 dark:text-gray-200&quot;&gt;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  &lt;!-- ... --&gt;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>&lt;/div&gt;</span></div></div><br/></code></div></div>
-<p class="my-4 leading-7">请注意，由于这些 <code>screen variants</code> 是在 <code>Tailwind CSS</code> 中实现的，因此<strong class="font-semibold">无法使用这种方法将断点与暗模式结合使用</strong> ，例如 <code>md:dark:text-gray-300</code> 将不起作用。</p>
-<h2 id="colors" class="mt-14 mb-6 text-2xl tracking-tight title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#colors">#</a>Colors</h2>
-<p class="my-4 leading-7"><code>colors</code> 属性可让您自定义项目的全局调色板。</p>
-<div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>const designSystem = {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  colors: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    transparent: &#x27;transparent&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    black: &#x27;#000&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    white: &#x27;#fff&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    gray: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      100: &#x27;#f7fafc&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      // ...</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      900: &#x27;#1a202c&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    // ...</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><br/></code></div></div>
-<p class="my-4 leading-7">默认情况下，这些颜色由 <code>backgroundColor</code>，<code>textColor</code> 和 <code>borderColor</code> 核心插件继承。</p>
-<p class="my-4 leading-7">想了解更多，可以查看：<a href="https://tailwindcss.com/docs/customizing-colors" target="_blank" rel="noopener noreferrer" class="link_2d294 undefined">Customizing Colors</a>。</p>
-<h2 id="spacing" class="mt-14 mb-6 text-2xl tracking-tight title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#spacing">#</a>Spacing</h2>
-<p class="my-4 leading-7">使用 <code>space</code> 属性，可以自定义项目的全局间距和缩放比例：</p>
-<div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>const designSystem = {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  spacing: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    px: &#x27;1px&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    0: &#x27;0&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    1: &#x27;0.25rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    2: &#x27;0.5rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    3: &#x27;0.75rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    4: &#x27;1rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    5: &#x27;1.25rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    6: &#x27;1.5rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    8: &#x27;2rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    10: &#x27;2.5rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    12: &#x27;3rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    16: &#x27;4rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    20: &#x27;5rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    24: &#x27;6rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    32: &#x27;8rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    40: &#x27;10rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    48: &#x27;12rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    56: &#x27;14rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    64: &#x27;16rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><br/></code></div></div>
-<p class="my-4 leading-7">默认情况下，这些值由 <code>padding</code>，<code>margin</code>，<code>negativeMargin</code>，<code>width</code> 和 <code>height</code> 核心插件继承。</p>
-<p class="my-4 leading-7">想要了解更多，看 <a href="https://tailwindcss.com/docs/customizing-spacing" target="_blank" rel="noopener noreferrer" class="link_2d294 undefined">Customizing Spacing</a>。</p>
-<h2 id="核心插件" class="mt-14 mb-6 text-2xl tracking-tight title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#核心插件">#</a>核心插件</h2>
-<p class="my-4 leading-7">主题部分的其余部分用于配置每个核心插件可用的值。</p>
-<p class="my-4 leading-7">例如，<code>borderRadius</code> 属性可让您自定义将生成的圆角的 <code>utilities</code>：</p>
-<div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>const designSystem = {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  borderRadius: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    none: &#x27;0&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    sm: &#x27;.125rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    default: &#x27;.25rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    lg: &#x27;.5rem&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    full: &#x27;9999px&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><br/></code></div></div>
-<p class="my-4 leading-7"><strong class="font-semibold">属性名确定所生成类的后缀，值确定实际 CSS 声明的值。</strong>
-上面的示例<code>borderRadius</code>配置将生成以下 CSS 类：</p>
-<div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>.rounded-none {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  border-radius: 0;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>.rounded-sm {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  border-radius: 0.125rem;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>.rounded {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  border-radius: 0.25rem;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>.rounded-lg {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  border-radius: 0.5rem;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>.rounded-full {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  border-radius: 9999px;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>}</span></div></div><br/></code></div></div>
-<p class="my-4 leading-7">会注意到，在主题配置中使用 <code>default</code> 属性创建了不带后缀的 <code>rounded</code> 类。这是许多（尽管不是全部）核心插件支持的 Tailwind CSS 中的通用约定。</p>
-<p class="my-4 leading-7">要了解有关自定义特定核心插件的更多信息，请访问该插件的文档。</p>
-<h2 id="自定义默认配置" class="mt-14 mb-6 text-2xl tracking-tight title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#自定义默认配置">#</a>自定义默认配置</h2>
-<p class="my-4 leading-7">开箱即用，您的项目将自动从默认主题配置继承值。如果想自定义默认主题，则根据目标有几种不同的选择。</p>
-<h3 id="覆盖默认配置" class="mt-10 mb-2 leading-7 text-xl title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#覆盖默认配置">#</a>覆盖默认配置</h3>
-<p class="my-4 leading-7">要覆盖默认配置中的选项，请在 <code>designSystem</code> 中添加要覆盖的属性：</p>
-<div class="ch-codegroup not-prose "><div class="ch-editor-frame" style="background:#2e3440"><div class="ch-frame-title-bar" style="color:#C5C5C5;background:#2e3440"><div class="ch-frame-buttons"><div class="ch-frame-button ch-frame-button-left"></div><div class="ch-frame-button-space"></div><div class="ch-frame-button ch-frame-button-middle"></div><div class="ch-frame-button-space"></div><div class="ch-frame-button ch-frame-button-right"></div></div><div title="modern.config.ts" data-ch-tab="north" class="ch-editor-tab ch-editor-tab-active" style="background:#3b4252;color:#d8dee9;border-right-color:#3b425200;border-bottom-color:#88c0d000"><div><span style="opacity:0.5"></span>modern.config.ts</div></div><div style="flex:1;min-width:0.8em"></div><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="ch-editor-button"><title>Copy</title><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6px" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg></div><div data-ch-panel="north" style="flex-grow:1;overflow:hidden"><div class="ch-code-wrapper" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto;height:100%"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>import { defineConfig } from &#x27;@modern-js/module-tools&#x27;;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>const designSystem = {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  // Replaces all of the default `opacity` values</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  opacity: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    0: &#x27;0&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    20: &#x27;0.2&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    40: &#x27;0.4&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    60: &#x27;0.6&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    80: &#x27;0.8&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    100: &#x27;1&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>export default defineConfig({</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  designSystem,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>});</span></div></div><br/></code></div></div></div></div>
-<p class="my-4 leading-7">这将完全替换默认属性配置，因此在上面的示例中，不会生成默认的 <code>opacity utilities</code>。</p>
-<p class="my-4 leading-7">您未提供的任何属性都将从默认主题继承，因此在上面的示例中，将保留颜色，间距，边框圆角，背景位置等内容的默认主题配置。</p>
-<h3 id="扩展默认配置" class="mt-10 mb-2 leading-7 text-xl title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#扩展默认配置">#</a>扩展默认配置</h3>
-<p class="my-4 leading-7">如果您想保留主题选项的默认值，但又要添加新值，请在 <code>designSystem.extend</code> 属性下添加扩展的内容。</p>
-<p class="my-4 leading-7">例如，如果您想添加一个额外的断点但保留现有的断点，则可以扩展 <code>screens</code> 属性：</p>
-<div class="ch-codegroup not-prose "><div class="ch-editor-frame" style="background:#2e3440"><div class="ch-frame-title-bar" style="color:#C5C5C5;background:#2e3440"><div class="ch-frame-buttons"><div class="ch-frame-button ch-frame-button-left"></div><div class="ch-frame-button-space"></div><div class="ch-frame-button ch-frame-button-middle"></div><div class="ch-frame-button-space"></div><div class="ch-frame-button ch-frame-button-right"></div></div><div title="modern.config.ts" data-ch-tab="north" class="ch-editor-tab ch-editor-tab-active" style="background:#3b4252;color:#d8dee9;border-right-color:#3b425200;border-bottom-color:#88c0d000"><div><span style="opacity:0.5"></span>modern.config.ts</div></div><div style="flex:1;min-width:0.8em"></div><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="ch-editor-button"><title>Copy</title><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6px" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg></div><div data-ch-panel="north" style="flex-grow:1;overflow:hidden"><div class="ch-code-wrapper" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto;height:100%"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>import { defineConfig } from &#x27;@modern-js/module-tools&#x27;;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>const designSystem = {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  extend: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    // Adds a new breakpoint in addition to the default breakpoints</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    screens: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      &#x27;2xl&#x27;: &#x27;1440px&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>export default defineConfig({</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  designSystem,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>});</span></div></div><br/></code></div></div></div></div>
-<p class="my-4 leading-7">您当然可以覆盖默认主题的某些部分，并在同一配置中扩展默认主题的其他部分：</p>
-<div class="ch-codegroup not-prose "><div class="ch-editor-frame" style="background:#2e3440"><div class="ch-frame-title-bar" style="color:#C5C5C5;background:#2e3440"><div class="ch-frame-buttons"><div class="ch-frame-button ch-frame-button-left"></div><div class="ch-frame-button-space"></div><div class="ch-frame-button ch-frame-button-middle"></div><div class="ch-frame-button-space"></div><div class="ch-frame-button ch-frame-button-right"></div></div><div title="modern.config.ts" data-ch-tab="north" class="ch-editor-tab ch-editor-tab-active" style="background:#3b4252;color:#d8dee9;border-right-color:#3b425200;border-bottom-color:#88c0d000"><div><span style="opacity:0.5"></span>modern.config.ts</div></div><div style="flex:1;min-width:0.8em"></div><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="ch-editor-button"><title>Copy</title><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6px" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg></div><div data-ch-panel="north" style="flex-grow:1;overflow:hidden"><div class="ch-code-wrapper" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto;height:100%"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>import { defineConfig } from &#x27;@modern-js/module-tools&#x27;;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>const designSystem = {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  opacity: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    0: &#x27;0&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    20: &#x27;0.2&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    40: &#x27;0.4&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    60: &#x27;0.6&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    80: &#x27;0.8&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    100: &#x27;1&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  extend: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    screens: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      &#x27;2xl&#x27;: &#x27;1440px&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>export default defineConfig({</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  designSystem,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>});</span></div></div><br/></code></div></div></div></div>
-<h3 id="引用其他值" class="mt-10 mb-2 leading-7 text-xl title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#引用其他值">#</a>引用其他值</h3>
-<p class="my-4 leading-7">如果需要在配置中引用另一个值，可以通过提供闭包函数而不是静态值来实现。函数将收到 <code>theme()</code> 函数作为参数，您可以使用该函数使用点表示法在配置中查找其他值。</p>
-<p class="my-4 leading-7">例如，您可以在 <code>fill</code> 配置上通过引用 <code>theme(&#x27;colors&#x27;)</code> 为调色板中的每种颜色生成 <code>fill</code> utilities。</p>
-<div class="ch-codegroup not-prose "><div class="ch-editor-frame" style="background:#2e3440"><div class="ch-frame-title-bar" style="color:#C5C5C5;background:#2e3440"><div class="ch-frame-buttons"><div class="ch-frame-button ch-frame-button-left"></div><div class="ch-frame-button-space"></div><div class="ch-frame-button ch-frame-button-middle"></div><div class="ch-frame-button-space"></div><div class="ch-frame-button ch-frame-button-right"></div></div><div title="modern.config.ts" data-ch-tab="north" class="ch-editor-tab ch-editor-tab-active" style="background:#3b4252;color:#d8dee9;border-right-color:#3b425200;border-bottom-color:#88c0d000"><div><span style="opacity:0.5"></span>modern.config.ts</div></div><div style="flex:1;min-width:0.8em"></div><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="ch-editor-button"><title>Copy</title><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6px" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg></div><div data-ch-panel="north" style="flex-grow:1;overflow:hidden"><div class="ch-code-wrapper" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto;height:100%"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>import { defineConfig } from &#x27;@modern-js/module-tools&#x27;;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>const designSystem = {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  colors: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    // ...</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  fill: theme =&gt; theme(&#x27;colors&#x27;),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>export default defineConfig({</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  designSystem,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>});</span></div></div><br/></code></div></div></div></div>
-<p class="my-4 leading-7"><code>theme()</code>函数尝试从已经完全合并的配置对象中找到您要查找的值，因此它可以引用您自己的自定义设置以及默认主题值。它也可以递归工作，因此只要链末尾有一个静态值，它就可以解析您要查找的值。</p>
-<p class="my-4 leading-7"><strong class="font-semibold">引用默认配置</strong></p>
-<p class="my-4 leading-7">如果出于任何原因想要引用默认配置中的值，则可以从 <code>tailwindcss/defaultTheme</code> 导入它。一个有用的示例是，如果要将添加默认配置提供的字体中某一个字体：</p>
-<div class="ch-codegroup not-prose "><div class="ch-editor-frame" style="background:#2e3440"><div class="ch-frame-title-bar" style="color:#C5C5C5;background:#2e3440"><div class="ch-frame-buttons"><div class="ch-frame-button ch-frame-button-left"></div><div class="ch-frame-button-space"></div><div class="ch-frame-button ch-frame-button-middle"></div><div class="ch-frame-button-space"></div><div class="ch-frame-button ch-frame-button-right"></div></div><div title="modern.config.ts" data-ch-tab="north" class="ch-editor-tab ch-editor-tab-active" style="background:#3b4252;color:#d8dee9;border-right-color:#3b425200;border-bottom-color:#88c0d000"><div><span style="opacity:0.5"></span>modern.config.ts</div></div><div style="flex:1;min-width:0.8em"></div><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="ch-editor-button"><title>Copy</title><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6px" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg></div><div data-ch-panel="north" style="flex-grow:1;overflow:hidden"><div class="ch-code-wrapper" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto;height:100%"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>import { defineConfig } from &#x27;@modern-js/module-tools&#x27;;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>const defaultTheme = require(&#x27;tailwindcss/defaultTheme&#x27;);</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>const designSystem = {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  extend: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    fontFamily: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      sans: [&#x27;Lato&#x27;, ...defaultTheme.fontFamily.sans],</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>export default defineConfig({</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  designSystem,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>});</span></div></div><br/></code></div></div></div></div>
-<h3 id="禁用整个核心插件" class="mt-10 mb-2 leading-7 text-xl title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#禁用整个核心插件">#</a>禁用整个核心插件</h3>
-<p class="my-4 leading-7">如果您不想为某个核心插件生成任何类，则最好在 <code>corePlugins</code> 配置中将该插件设置为 <code>false</code>，而不是在配置中为该属性提供一个空对象：</p>
-<div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>// Don&#x27;t assign an empty object in your theme configuration</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>const designSystem = {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  opacity: {},</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>// Do disable the plugin in your corePlugins configuration</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>const designSyttem = {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  corePlugins: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    opacity: false,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><br/></code></div></div>
-<p class="my-4 leading-7">最终结果是相同的，但是由于许多核心插件未公开任何配置，因此无论如何只能使用 corePlugins 禁用它们，最好保持一致。</p>
-<h3 id="添加自己的-key" class="mt-10 mb-2 leading-7 text-xl title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#添加自己的-key">#</a>添加自己的 key</h3>
-<p class="my-4 leading-7">在很多情况下，将自己的属性添加到配置对象可能会很有用。</p>
-<p class="my-4 leading-7">其中一个示例是添加新属性为多个核心插件之间复用。例如，您可以提取一个 <code>positions</code>对象，<code>backgroundPosition</code> 和 <code>objectPosition</code> 插件都可以引用该对象：</p>
-<div class="ch-codeblock not-prose "><div class="ch-code" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>const designSystem = {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  positions: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    bottom: &#x27;bottom&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    center: &#x27;center&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    left: &#x27;left&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;left-bottom&#x27;: &#x27;left bottom&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;left-top&#x27;: &#x27;left top&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    right: &#x27;right&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;right-bottom&#x27;: &#x27;right bottom&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;right-top&#x27;: &#x27;right top&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    top: &#x27;top&#x27;,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  backgroundPosition: theme =&gt; theme(&#x27;positions&#x27;),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  objectPosition: theme =&gt; theme(&#x27;positions&#x27;),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><br/></code></div></div>
-<p class="my-4 leading-7">另一个示例是在自定义插件中添加新的属性以进行引用。例如，如果您为项目编写了渐变插件，则可以向该插件引用的主题对象添加渐变属性：</p>
-<div class="ch-codegroup not-prose "><div class="ch-editor-frame" style="background:#2e3440"><div class="ch-frame-title-bar" style="color:#C5C5C5;background:#2e3440"><div class="ch-frame-buttons"><div class="ch-frame-button ch-frame-button-left"></div><div class="ch-frame-button-space"></div><div class="ch-frame-button ch-frame-button-middle"></div><div class="ch-frame-button-space"></div><div class="ch-frame-button ch-frame-button-right"></div></div><div title="modern.config.ts" data-ch-tab="north" class="ch-editor-tab ch-editor-tab-active" style="background:#3b4252;color:#d8dee9;border-right-color:#3b425200;border-bottom-color:#88c0d000"><div><span style="opacity:0.5"></span>modern.config.ts</div></div><div style="flex:1;min-width:0.8em"></div><svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="ch-editor-button"><title>Copy</title><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6px" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg></div><div data-ch-panel="north" style="flex-grow:1;overflow:hidden"><div class="ch-code-wrapper" style="margin:0;padding:0;position:relative;white-space:pre;box-sizing:content-box;opacity:0;overflow:auto;height:100%"><code class="ch-code-scroll-parent"><br/><div><div style="display:inline-block;margin-left:16px"><span>import { defineConfig } from &#x27;@modern-js/module-tools&#x27;;</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>const designSystem = {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  gradients: theme =&gt; ({</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;blue-green&#x27;: [theme(&#x27;colors.blue.500&#x27;), theme(&#x27;colors.green.500&#x27;)],</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    &#x27;purple-blue&#x27;: [theme(&#x27;colors.purple.500&#x27;), theme(&#x27;colors.blue.500&#x27;)],</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    // ...</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  }),</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>};</span></div></div><div><div style="display:inline-block;margin-left:16px"><span></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>export default defineConfig({</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  designSystem,</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  buildConfig: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    style: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      postcss: {</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>        plugins: [require(&#x27;./plugins/gradients&#x27;)],</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>      },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>    },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>  },</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>});</span></div></div><br/></code></div></div></div></div>
-<h2 id="配置引用" class="mt-14 mb-6 text-2xl tracking-tight title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#配置引用">#</a>配置引用</h2>
-<p class="my-4 leading-7">除了 <code>screens</code>，<code>colors</code> 和 <code>spacing</code> 外，配置对象中的所有属性都映射到 <code>Tailwind CSS</code> 的核心插件上。由于许多插件负责仅接受静态值集（例如，例如<code>float</code>）的 CSS 属性，因此请注意，并非每个插件在主题对象中都有对应的属性。</p>
-<p class="my-4 leading-7">所有这些属性也可以在 <code>designSystem.extend</code> 属性下使用，以扩展默认主题。</p>
-<p class="my-4 leading-7">关于所有属性的作用，可以查看此 <a href="https://tailwindcss.com/docs/theme#configuration-reference" target="_blank" rel="noopener noreferrer" class="link_2d294 undefined">链接</a>。</p><!--/$--><div><footer class="mt-8"><div class="xs:flex pb-5 px-2 justify-end items-center"></div><div class="flex flex-col"><a href="https://github.com/web-infra-dev/modern.js/tree/main/packages/document/module-doc/docs/zh/api/config/design-system.md" target="_blank" class="editLink_469b1"><svg width="18" height="18" viewBox="0 0 32 32" class="h-5.5 mr-2 inline-block" style="vertical-align:-5px"><path fill="currentColor" d="M2 26h28v2H2zM25.4 9c.8-.8.8-2 0-2.8l-3.6-3.6c-.8-.8-2-.8-2.8 0l-15 15V24h6.4l15-15zm-5-5L24 7.6l-3 3L17.4 7l3-3zM6 22v-3.6l10-10 3.6 3.6-10 10H6z"></path></svg>Edit this page on GitHub</a></div><div class="flex flex-col sm:flex-row sm:justify-around gap-4 pt-6"><div class="prev_021f9 flex flex-col"><a class="link_2a8f5 pager-link_021f9 cursor-pointer" target="" href="/module-tools/api/config/build-preset.html"><span class="desc_021f9">上一页</span><span class="title_021f9">buildPreset</span></a></div><div class="next_021f9 flex flex-col"><a class="link_2a8f5 pager-link_021f9 next_021f9 cursor-pointer" target="" href="/module-tools/api/config/dev.html"><span class="desc_021f9">下一页</span><span class="title_021f9">dev</span></a></div></div></footer></div></div></div><div class="aside-container_12c7d" style="max-height:calc(100vh - (var(--modern-nav-height) + 32px));overflow:scroll"><div><div class="flex flex-col"><div class="&lt;lg:hidden"><div id="aside-container" class="relative pl-4 text-sm font-medium"><div class="leading-7 block text-sm font-semibold">目录</div><nav class="mt-1"><ul class="relative"><li><a href="#screens" class="leading-7 transition-all duration-300 hover:text-text-1 text-text-2 block" style="font-size:13px;padding-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:semibold">Screens</a></li><li><a href="#max-width-断点" class="leading-7 transition-all duration-300 hover:text-text-1 text-text-2 block" style="font-size:13px;padding-left:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:normal">Max-width 断点</a></li><li><a href="#多个范围的断点" class="leading-7 transition-all duration-300 hover:text-text-1 text-text-2 block" style="font-size:13px;padding-left:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:normal">多个范围的断点</a></li><li><a href="#自定义媒体查询" class="leading-7 transition-all duration-300 hover:text-text-1 text-text-2 block" style="font-size:13px;padding-left:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:normal">自定义媒体查询</a></li><li><a href="#print-样式" class="leading-7 transition-all duration-300 hover:text-text-1 text-text-2 block" style="font-size:13px;padding-left:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:normal">Print 样式</a></li><li><a href="#dark-mode" class="leading-7 transition-all duration-300 hover:text-text-1 text-text-2 block" style="font-size:13px;padding-left:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:normal">Dark Mode</a></li><li><a href="#colors" class="leading-7 transition-all duration-300 hover:text-text-1 text-text-2 block" style="font-size:13px;padding-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:semibold">Colors</a></li><li><a href="#spacing" class="leading-7 transition-all duration-300 hover:text-text-1 text-text-2 block" style="font-size:13px;padding-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:semibold">Spacing</a></li><li><a href="#核心插件" class="leading-7 transition-all duration-300 hover:text-text-1 text-text-2 block" style="font-size:13px;padding-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:semibold">核心插件</a></li><li><a href="#自定义默认配置" class="leading-7 transition-all duration-300 hover:text-text-1 text-text-2 block" style="font-size:13px;padding-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:semibold">自定义默认配置</a></li><li><a href="#覆盖默认配置" class="leading-7 transition-all duration-300 hover:text-text-1 text-text-2 block" style="font-size:13px;padding-left:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:normal">覆盖默认配置</a></li><li><a href="#扩展默认配置" class="leading-7 transition-all duration-300 hover:text-text-1 text-text-2 block" style="font-size:13px;padding-left:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:normal">扩展默认配置</a></li><li><a href="#引用其他值" class="leading-7 transition-all duration-300 hover:text-text-1 text-text-2 block" style="font-size:13px;padding-left:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:normal">引用其他值</a></li><li><a href="#禁用整个核心插件" class="leading-7 transition-all duration-300 hover:text-text-1 text-text-2 block" style="font-size:13px;padding-left:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:normal">禁用整个核心插件</a></li><li><a href="#添加自己的-key" class="leading-7 transition-all duration-300 hover:text-text-1 text-text-2 block" style="font-size:13px;padding-left:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:normal">添加自己的 key</a></li><li><a href="#配置引用" class="leading-7 transition-all duration-300 hover:text-text-1 text-text-2 block" style="font-size:13px;padding-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:semibold">配置引用</a></li></ul></nav></div></div></div></div></div></div></div></section></div></div><div id="search-container"></div></body></html>