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

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

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 (211) hide show

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

@@ -1,127 +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/en" 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/en/guide/intro/welcome.html"><div class="singleItem_cc721  text-sm font-medium mx-1.5 px-3 py-2">Guide</div></a><a class="link_2a8f5  cursor-pointer" target="" href="/module-tools/en/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/en/plugins/guide/getting-started.html"><div class="singleItem_cc721  text-sm font-medium mx-1.5 px-3 py-2">Plugins</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>Changelog</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>Contributing</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="font-medium my-1"><a class="link_2a8f5  cursor-pointer" target="" href="/module-tools/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>简体中文</span></div></div></a></div></div><div><div class="rounded-2xl my-1" style="padding:0.4rem 1.5rem 0.4rem 0.75rem"><span class="text-brand">English</span></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/en/guide/intro/welcome.html"><div class="singleItem_cc721  text-sm font-medium mx-1.5 px-3 py-2">Guide</div></a></div><div class="navMenuItem_4eb57 w-full"><a class="link_2a8f5  cursor-pointer" target="" href="/module-tools/en/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/en/plugins/guide/getting-started.html"><div class="singleItem_cc721  text-sm font-medium mx-1.5 px-3 py-2">Plugins</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>Changelog</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>Contributing</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="py-1 font-medium"><a class="link_2a8f5  cursor-pointer" target="" href="/module-tools/zh.html"><div><div class="flex justify-center"><span>简体中文</span></div></div></a></div></div><div><div class="p-1"><span class="text-brand">English</span></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/en/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">Overview</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">Config</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/en/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/en/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/en/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/en/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/en/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/en/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/en/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">This chapter describes the configuration related to 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">
-The Tailwind CSS feature needs to be enabled first via <code>pnpm run new</code>.</p></div></div>
-<ul class="list-disc pl-5 my-4 leading-7">
-<li class="[&amp;:not(:first-child)]:mt-2">Type: <code>object</code></li>
-<li class="[&amp;:not(:first-child)]:mt-2">Default: <code>see configuration details below</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">
-More about <a href="https://tailwindcss.com/docs/configuration#theme" target="_blank" rel="noopener noreferrer" class="link_2d294 undefined">TailwindCSS configuration</a></p></div></div>
-<!-- -->
-<p class="my-4 leading-7">The <code>designSystem</code> is used to define the project&#x27;s color palette, typographic scales (Typographic Scales or Type Scale), font list, breakpoints, border rounding values, etc. Since Modern.js borrows the design approach from Tailwind Theme and integrates with Tailwind CSS internally, <code>designSystem</code> is used in the same way as Tailwind CSS Theme</p>
-<p class="my-4 leading-7">The <code>designSystem</code> object contains the <code>screens</code>, <code>colors</code> and <code>spacing</code> properties, as well as each customizable core plugin.</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">The responsive breakpoints in your project can be customized using <code>screens</code>: the</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">where the property name in the <code>screens</code> object is the screen name (used as a prefix for the adaptive utility variants generated by <code>Tailwind CSS</code>, e.g. <code>md:text-center</code>) and the value is the <code>min-width</code> at which the breakpoint should start.</p>
-<p class="my-4 leading-7">Default breakpoints are inspired by common device resolutions: the</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">You can use any name you like as a breakpoint property in your project: the</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">These screen names are reflected in <code>utilities</code>, so <code>text-center</code> now looks like this</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-breakpoints" class="mt-10 mb-2 leading-7 text-xl title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#max-width-breakpoints">#</a>Max-width breakpoints</h3>
-<p class="my-4 leading-7">To use the <code>max-width</code> breakpoint instead of <code>min-width</code>, you can specify the screen as an object with the <code>max</code> attribute.</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">If necessary, to create breakpoints with <code>min-width</code> and <code>max-width</code> definitions, e.g.</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; }, 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="multiple-range-breakpoints" class="mt-10 mb-2 leading-7 text-xl title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#multiple-range-breakpoints">#</a>Multiple range breakpoints</h3>
-<p class="my-4 leading-7">Sometimes it can be useful to apply a single breakpoint definition to multiple scopes.</p>
-<p class="my-4 leading-7">For example, suppose you have a <code>sidebar</code> and want the breakpoint to be based on the width of the content area rather than the entire viewport. You can simulate this situation by using a smaller breakpoint style when the <code>sidebar</code> is visible and the content area is narrowed: the</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; }, { 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="custom-media-queries" class="mt-10 mb-2 leading-7 text-xl title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#custom-media-queries">#</a>Custom media queries</h3>
-<p class="my-4 leading-7">If a fully customizable media query is required for a breakpoint, an object with the <code>raw</code> attribute can be used.</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-styles" class="mt-10 mb-2 leading-7 text-xl title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#print-styles">#</a>Print styles</h3>
-<p class="my-4 leading-7">The <code>raw</code> option may be particularly useful if you need to apply different styles to printing.</p>
-<p class="my-4 leading-7">All that needs to be done is to add a <code>print</code> under <code>designSystem.extend.screens</code>.</p>
-<p class="my-4 leading-7">``js
-const designSystem = {
-extend: {
-screens: {
-print: { raw: &#x27;print&#x27; },
-// =&gt; @media print { ... }
-},
-},
-};</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></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>Then, a class such as ``print:text-black`` can be used to specify a style that is applied only when someone tries to print a page: ``</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>```html</span></div></div><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">By default, these colors are inherited by the <code>backgroundColor</code>, <code>textColor</code> and <code>borderColor</code> core plugins.</p>
-<p class="my-4 leading-7">To learn more, you can check out: <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">The global spacing and scaling of items can be customized using the <code>space</code> attribute: the</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">By default, these values are inherited by the <code>padding</code>, <code>margin</code>, <code>negativeMargin</code>, <code>width</code> and <code>height</code> core plugins.</p>
-<p class="my-4 leading-7">To learn more, see <a href="https://tailwindcss.com/docs/customizing-spacing" target="_blank" rel="noopener noreferrer" class="link_2d294 undefined">Customizing Spacing</a>.</p>
-<h2 id="core-plugins" class="mt-14 mb-6 text-2xl tracking-tight title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#core-plugins">#</a>Core plugins</h2>
-<p class="my-4 leading-7">The rest of the theme section is used to configure the values available for each core plugin.</p>
-<p class="my-4 leading-7">For example, the <code>borderRadius</code> property allows you to customize the ``utilities` that will generate the rounded corners.</p>
-<p class="my-4 leading-7">``js
-const designSystem = {
-borderRadius: {
-none: &#x27;0&#x27;,
-sm: &#x27;.125rem&#x27;,
-default: &#x27;.25rem&#x27;,
-lg: &#x27;.5rem&#x27;,
-full: &#x27;9999px&#x27;,
-},
-};</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></span></div></div><div><div style="display:inline-block;margin-left:16px"><span>** The attribute name determines the suffix of the generated class, and the value determines the value of the actual CSS declaration. **</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>The example ``borderRadius`` configuration above will generate the following CSS classes.</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>```css</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>.rounded-none { border-radius: 0 }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>.rounded-sm { border-radius: .125rem }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>.rounded { border-radius: .25rem }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>.rounded-lg { border-radius: .5rem }</span></div></div><div><div style="display:inline-block;margin-left:16px"><span>.rounded-full { border-radius: 9999px }</span></div></div><br/></code></div></div>
-<p class="my-4 leading-7">You will notice that the <code>rounded</code> class is created without the suffix in the theme configuration using the <code>default</code> attribute. This is a common convention in Tailwind CSS supported by many (though not all) of the core plugins.</p>
-<p class="my-4 leading-7">To learn more about customizing a specific core plugin, please visit the documentation for that plugin.</p>
-<h2 id="customizing-the-default-configuration" class="mt-14 mb-6 text-2xl tracking-tight title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#customizing-the-default-configuration">#</a>Customizing the default configuration</h2>
-<p class="my-4 leading-7">Out of the box, your project will automatically inherit values from the default theme configuration. If you want to customize the default theme, there are several different options depending on the goal.</p>
-<h3 id="override-the-default-configuration" class="mt-10 mb-2 leading-7 text-xl title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#override-the-default-configuration">#</a>Override the default configuration</h3>
-<p class="my-4 leading-7">To override the options in the default configuration, add the properties to be overridden to <code>designSystem</code> at</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">This will completely replace the default property configuration, so in the above example, the default <code>opacity utilities</code> will not be generated.</p>
-<p class="my-4 leading-7">Any properties you do not provide will be inherited from the default theme, so in the example above, the default theme configuration for color, spacing, border rounding, background position, etc. will be retained.</p>
-<h3 id="extending-the-default-configuration" class="mt-10 mb-2 leading-7 text-xl title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#extending-the-default-configuration">#</a>Extending the default configuration</h3>
-<p class="my-4 leading-7">If you want to keep the default values of the theme options but add new values, add the extensions under the <code>designSystem.extend</code> property.</p>
-<p class="my-4 leading-7">For example, if you want to add an additional breakpoint but keep the existing one, you can extend the <code>screens</code> property with.</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">You can certainly override some parts of the default theme and extend other parts of the default theme in the same configuration: the</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="referencing-other-values" class="mt-10 mb-2 leading-7 text-xl title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#referencing-other-values">#</a>Referencing other values</h3>
-<p class="my-4 leading-7">If you need to reference another value in the configuration, you can do so by providing a closure function instead of a static value. The function will receive the <code>theme()</code> function as an argument, and you can use this function to find other values in the configuration using a dot representation.</p>
-<p class="my-4 leading-7">For example, you can generate <code>fill</code> utilities for each color in the palette by referring to <code>theme(&#x27;colors&#x27;)</code> on the <code>fill</code> configuration.</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">The <code>theme()</code> function tries to find the value you are looking for from an already fully merged configuration object, so it can reference your own custom settings as well as the default theme value. It also works recursively, so as long as there is a static value at the end of the chain, it can resolve the value you are looking for.</p>
-<p class="my-4 leading-7"><strong class="font-semibold">Reference to the default configuration</strong></p>
-<p class="my-4 leading-7">If for any reason you want to reference a value in the default configuration, you can import it from <code>tailwindcss/defaultTheme</code>. A useful example would be to add one of the fonts provided by the default configuration to.</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="disabling-the-entire-core-plugin" class="mt-10 mb-2 leading-7 text-xl title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#disabling-the-entire-core-plugin">#</a>Disabling the entire core plugin</h3>
-<p class="my-4 leading-7">If you don&#x27;t want to generate any classes for a core plugin, it&#x27;s better to set the plugin to <code>false</code> in the <code>corePlugins</code> configuration, rather than providing an empty object for the property in the configuration: ``</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">The end result is the same, but since many core plugins don&#x27;t expose any configuration, it&#x27;s best to keep it consistent by only disabling them with corePlugins anyway.</p>
-<h3 id="adding-your-own-key" class="mt-10 mb-2 leading-7 text-xl title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#adding-your-own-key">#</a>Adding your own key</h3>
-<p class="my-4 leading-7">In many cases it may be useful to add your own properties to the configuration object.</p>
-<p class="my-4 leading-7">One example is to add new properties for multiplexing between multiple core plugins. For example, you can extract a <code>positions</code> object that both the <code>backgroundPosition</code> and <code>objectPosition</code> plugins can refer to.</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">Another example is to add a new property to a custom plugin for referencing. For example, if you write a gradient plugin for your project, you can add a gradient property to the theme object referenced by that plugin.</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="configuration-references" class="mt-14 mb-6 text-2xl tracking-tight title_2d294"><a class="link_2d294 header-anchor" aria-hidden="true" href="#configuration-references">#</a>Configuration references</h2>
-<p class="my-4 leading-7">All properties in the configuration object, except <code>screens</code>, <code>colors</code> and <code>spacing</code>, are mapped to the core plugins of <code>Tailwind CSS</code>. Since many plugins are responsible for CSS properties that accept only static sets of values (e.g., e.g., <code>float</code>), please note that not every plugin has a corresponding property in the theme object.</p>
-<p class="my-4 leading-7">All of these properties can also be used under the <code>designSystem.extend</code> property to extend the default theme.</p>
-<p class="my-4 leading-7">For more information about what all the properties do, check out this <a href="https://tailwindcss.com/docs/theme#configuration-reference" target="_blank" rel="noopener noreferrer" class="link_2d294 undefined">link</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/en/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/en/api/config/build-preset.html"><span class="desc_021f9">Previous Page</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/en/api/config/dev.html"><span class="desc_021f9">Next page</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">ON THIS PAGE</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-breakpoints" 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 breakpoints</a></li><li><a href="#multiple-range-breakpoints" 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">Multiple range breakpoints</a></li><li><a href="#custom-media-queries" 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">Custom media queries</a></li><li><a href="#print-styles" 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 styles</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="#core-plugins" 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">Core plugins</a></li><li><a href="#customizing-the-default-configuration" 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">Customizing the default configuration</a></li><li><a href="#override-the-default-configuration" 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">Override the default configuration</a></li><li><a href="#extending-the-default-configuration" 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">Extending the default configuration</a></li><li><a href="#referencing-other-values" 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">Referencing other values</a></li><li><a href="#disabling-the-entire-core-plugin" 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">Disabling the entire core plugin</a></li><li><a href="#adding-your-own-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">Adding your own key</a></li><li><a href="#configuration-references" 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">Configuration references</a></li></ul></nav></div></div></div></div></div></div></div></section></div></div><div id="search-container"></div></body></html>