npm - @modern-js/module-tools-docs - Versions diffs - 2.2.0 → 2.3.0 - Mend

@modern-js/module-tools-docs 2.2.0 → 2.3.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 (156) hide show

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

@@ -1,117 +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"><link rel="icon" href="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/logo-1x-0104.png" /><title data-rh="true">DesignSystem - Module Tools</title><meta data-rh="true" name="description" content="Module Engineering Solutions"/><script>!function(){"use strict";var e,n,i,t,o,r={},u={};function _(e){var n=u[e];if(void 0!==n)return n.exports;var i=u[e]={exports:{}};return r[e].call(i.exports,i,i.exports,_),i.exports}_.m=r,e=[],_.O=function(n,i,t,o){if(!i){var r=1/0;for(a=0;a<e.length;a++){i=e[a][0],t=e[a][1],o=e[a][2];for(var u=!0,d=0;d<i.length;d++)(!1&o||r>=o)&&Object.keys(_.O).every((function(e){return _.O[e](i[d])}))?i.splice(d--,1):(u=!1,o<r&&(r=o));if(u){e.splice(a--,1);var c=t();void 0!==c&&(n=c)}}return n}o=o||0;for(var a=e.length;a>0&&e[a-1][2]>o;a--)e[a]=e[a-1];e[a]=[i,t,o]},_.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return _.d(n,{a:n}),n},i=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},_.t=function(e,t){if(1&t&&(e=this(e)),8&t)return e;if("object"==typeof e&&e){if(4&t&&e.__esModule)return e;if(16&t&&"function"==typeof e.then)return e}var o=Object.create(null);_.r(o);var r={};n=n||[null,i({}),i([]),i(i)];for(var u=2&t&&e;"object"==typeof u&&!~n.indexOf(u);u=i(u))Object.getOwnPropertyNames(u).forEach((function(n){r[n]=function(){return e[n]}}));return r.default=function(){return e},_.d(o,r),o},_.d=function(e,n){for(var i in n)_.o(n,i)&&!_.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:n[i]})},_.f={},_.e=function(e){return Promise.all(Object.keys(_.f).reduce((function(n,i){return _.f[i](e,n),n}),[]))},_.u=function(e){return"static/js/async/"+({229:"en_guide_intro_getting-started",237:"zh_api_config_build-config",315:"en_index",421:"zh_api_config_testing",727:"zh_guide_advance_in-depth-about-build",775:"zh_guide_basic_before-getting-started",1085:"en_api_index",1108:"zh_guide_intro_why-module-engineering-solution",1178:"zh_api_plugin-api_plugin-hooks",1180:"zh_guide_advance_theme-config",1189:"zh_api_index",1677:"en_api_plugin-api_plugin-hooks",1756:"zh_guide_basic_command-preview",1895:"zh_index",2013:"zh_guide_best-practices_components",2020:"zh_guide_basic_publish-your-project",2033:"en_guide_intro_welcome",2034:"zh_guide_intro_welcome",2097:"en_api_config_plugins",2532:"en_guide_basic_use-micro-generator",2540:"zh_guide_advance_in-depth-about-dev-command",2556:"en_api_config_testing",2611:"zh_guide_advance_copy",2633:"zh_guide_intro_getting-started",2678:"en_guide_basic_before-getting-started",2821:"zh_guide_basic_modify-output-product",2892:"zh_plugins_guide_setup-function",3032:"en_guide_basic_publish-your-project",3741:"en_guide_basic_test-your-project",3806:"zh_api_config_plugins",4260:"en_guide_advance_external-dependency",4390:"zh_plugins_official-list_overview",4663:"en_guide_advance_build-umd",4695:"zh_api_config_design-system",4749:"en_plugins_guide_setup-function",4837:"zh_guide_advance_build-umd",5057:"en_guide_advance_copy",5107:"zh_guide_basic_using-storybook",5284:"zh_plugins_guide_plugin-object",5300:"en_plugins_guide_plugin-object",5532:"zh_guide_advance_external-dependency",5578:"en_guide_basic_modify-output-product",5654:"en_api_config_build-config",5723:"zh_guide_advance_asset",5966:"zh_guide_basic_test-your-project",6098:"en_guide_advance_theme-config",7241:"zh_api_config_build-preset",7294:"zh_guide_basic_use-micro-generator",7401:"en_guide_best-practices_components",7512:"en_guide_intro_why-module-engineering-solution",7571:"en_guide_basic_command-preview",8230:"en_guide_advance_asset",8687:"en_plugins_guide_getting-started",8782:"en_api_config_build-preset",8927:"en_guide_advance_in-depth-about-build",9220:"en_api_config_design-system",9479:"en_plugins_official-list_overview",9675:"en_guide_basic_using-storybook",9826:"en_guide_advance_in-depth-about-dev-command",9868:"zh_plugins_guide_getting-started"}[e]||e)+"."+{229:"f8682be3",237:"048fd5ec",315:"7bd869c4",421:"a9888eed",727:"64e795f3",775:"6b06b54a",1085:"669f0a56",1108:"6f8b5ff6",1178:"a4d81bf6",1180:"b9570109",1189:"22957707",1677:"60d0260c",1756:"1199124a",1895:"c19f9dcf",2013:"7454d916",2020:"bf11b1c4",2033:"9cc45924",2034:"71c3fe16",2097:"fc95fb77",2532:"56325139",2540:"168ce7dd",2556:"8bc7f316",2611:"21a1aea4",2633:"a4c00d9a",2678:"a22fc49a",2821:"8ccbc8d1",2892:"67d07b91",3032:"08c5112f",3741:"f5f6b204",3799:"e31e8293",3806:"c22dc4be",4260:"a52d3247",4390:"a7635714",4663:"c254ed46",4695:"1eecd474",4749:"80a2bd97",4837:"b6d541ff",5057:"45c0a51d",5107:"27829e44",5284:"963289d5",5300:"bf6c6221",5532:"c7cf5d4b",5578:"ad453d13",5654:"367a5701",5723:"5b936003",5966:"ae52c47a",6098:"db0ad9fc",7241:"7c13584d",7294:"a091d57d",7401:"45155af9",7512:"7f2dae5c",7571:"1707ed29",8230:"5ff1d623",8652:"6fbf1cb7",8687:"b850249c",8782:"0d78b268",8927:"51bf3569",9220:"b28d6723",9479:"84e5cea0",9675:"9d721554",9826:"aec0b4e1",9868:"099dfaea"}[e]+".js"},_.miniCssF=function(e){},_.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),_.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t={},o="@modern-js/module-tools-docs:",_.l=function(e,n,i,r){if(t[e])t[e].push(n);else{var u,d;if(void 0!==i)for(var c=document.getElementsByTagName("script"),a=0;a<c.length;a++){var f=c[a];if(f.getAttribute("src")==e||f.getAttribute("data-webpack")==o+i){u=f;break}}u||(d=!0,(u=document.createElement("script")).charset="utf-8",u.timeout=120,_.nc&&u.setAttribute("nonce",_.nc),u.setAttribute("data-webpack",o+i),u.src=e),t[e]=[n];var s=function(n,i){u.onerror=u.onload=null,clearTimeout(g);var o=t[e];if(delete t[e],u.parentNode&&u.parentNode.removeChild(u),o&&o.forEach((function(e){return e(i)})),n)return n(i)},g=setTimeout(s.bind(null,void 0,{type:"timeout",target:u}),12e4);u.onerror=s.bind(null,u.onerror),u.onload=s.bind(null,u.onload),d&&document.head.appendChild(u)}},_.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},_.p="/",function(){var e={6272:0};_.f.j=function(n,i){var t=_.o(e,n)?e[n]:void 0;if(0!==t)if(t)i.push(t[2]);else if(6272!=n){var o=new Promise((function(i,o){t=e[n]=[i,o]}));i.push(t[2]=o);var r=_.p+_.u(n),u=new Error;_.l(r,(function(i){if(_.o(e,n)&&(0!==(t=e[n])&&(e[n]=void 0),t)){var o=i&&("load"===i.type?"missing":i.type),r=i&&i.target&&i.target.src;u.message="Loading chunk "+n+" failed.\n("+o+": "+r+")",u.name="ChunkLoadError",u.type=o,u.request=r,t[1](u)}}),"chunk-"+n,n)}else e[n]=0},_.O.j=function(n){return 0===e[n]};var n=function(n,i){var t,o,r=i[0],u=i[1],d=i[2],c=0;if(r.some((function(n){return 0!==e[n]}))){for(t in u)_.o(u,t)&&(_.m[t]=u[t]);if(d)var a=d(_)}for(n&&n(i);c<r.length;c++)o=r[c],_.o(e,o)&&e[o]&&e[o][0](),e[o]=0;return _.O(a)},i=self.webpackChunk_modern_js_module_tools_docs=self.webpackChunk_modern_js_module_tools_docs||[];i.forEach(n.bind(null,0)),i.push=n.bind(null,i.push.bind(i))}()}();</script><script defer="defer" src="/static/js/lib-polyfill.b3038509.js"></script><script defer="defer" src="/static/js/lib-lodash.c5845536.js"></script><script defer="defer" src="/static/js/lib-react.d41ace5e.js"></script><script defer="defer" src="/static/js/1607.70af642a.js"></script><script defer="defer" src="/static/js/main.2d3257a4.js"></script><link href="/static/css/main.edaad072.css" rel="stylesheet"></head><body><div id="root"><div style="height:100%"><header class="top-0 left-0 relative md:fixed w-full" style="border-bottom:1px solid var(--modern-c-divider-light);z-index:var(--modern-z-index-nav)"><div class="J5RhI modern-doc-nav" p="x-6"><div flex="~" justify="between" align="items-center" h="full" class="Be7Bu"><div class="undefined"><a href="/module-tools/en" w="full" h="full" text="1rem" font="semibold" transition="opacity duration-300" hover="opacity-60" class="flex items-center"><span>Module Tools</span></a></div><div flex="~ 1" justify="end" align-items-center="~"><div class="fxz4T"><div class="search" flex="sm:1" p="sm:l-8"><div flex="~" align="items-center" pos="relative" m="r-2" font="semibold"><svg width="32" height="32" viewBox="0 0 32 32" w="5" h="5" fill="currentColor"><path fill="#888888" d="m29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9Z"></path></svg><input disabled="" cursor="text focus:auto" placeholder="Search" height="8" border="none" type="text" text="sm" p="t-0 r-2 b-0 l-2" transition="all duration-200 ease" class="rounded-sm SjSZ2 " aria-label="Search" autoComplete="off"/><div m="r-3" w="10" h="6" p="x-1.5" border="1px solid gray-light-3 rounded-md" text="xs gray-light-3" flex="~" align="items-center" justify="around" class="iUJv9"><span>⌘</span><span>K</span></div></div></div><div class="menu" h="14"><div text="sm" font="medium" m="x-3" class=""><a class="R5q4o " target="" cursor="pointer" href="/module-tools/en/guide/intro/welcome.html">Guide</a></div><div text="sm" font="medium" m="x-3" class="text-brand"><a class="R5q4o " target="" cursor="pointer" href="/module-tools/en/api/index.html">API</a></div><div text="sm" font="medium" m="x-3" class=""><a class="R5q4o " target="" cursor="pointer" href="/module-tools/en/plugins/guide/getting-started.html">Plugins</a></div><div m="x-3" last="mr-0"><div h="14" class="relative" flex="~ center"><button flex="~ center" align="items-center" font="medium" text="sm text-1 hover:text-2" transition="color duration-200" class="nav-menu-group-button"><span m="r-1" text="sm" font="medium">v2.2.0</span><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div pos="top-13 right-0" m="x-0.8" transition="opacity duration-300" class="nav-menu-group-content absolute" style="opacity:0;visibility:hidden"><div p="3" w="full" h="full" class="min-w-128px max-h-100vh rounded-xl whitespace-nowrap" bg="white" style="box-shadow:var(--modern-shadow-3);margin-right:-1.5rem;z-index:100;border:1px solid var(--modern-c-divider-light)"><div font="medium"><a href="https://github.com/modern-js-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="R5q4o "><div class="rounded-md" hover="bg-mute" p="y-1.6 l-3 r-6"><div flex="~"><span m="r-1">Changelog<svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1 l-1" class="inline-block align-text-top"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></span></div></div></a></div><div font="medium"><a href="https://github.com/modern-js-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="R5q4o "><div class="rounded-md" hover="bg-mute" p="y-1.6 l-3 r-6"><div flex="~"><span m="r-1">Contributing<svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1 l-1" class="inline-block align-text-top"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></span></div></div></a></div></div></div></div></div></div><div flex="~" text="sm" font="bold" align="items-center" class="translation WjR05"><div m="x-1.5"><div h="14" class="relative" flex="~ center"><button flex="~ center" align="items-center" font="medium" text="sm text-1 hover:text-2" transition="color duration-200" class="nav-menu-group-button"><span m="r-1" text="sm" font="medium"><svg width="32" height="32" viewBox="0 0 32 32" w="18px" h="18px"><path fill="currentColor" d="M27.85 29H30l-6-15h-2.35l-6 15h2.15l1.6-4h6.85zm-7.65-6l2.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 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div pos="top-13 right-0" m="x-0.8" transition="opacity duration-300" class="nav-menu-group-content absolute" style="opacity:0;visibility:hidden"><div p="3" w="full" h="full" class="min-w-128px max-h-100vh rounded-xl whitespace-nowrap" bg="white" style="box-shadow:var(--modern-shadow-3);margin-right:-1.5rem;z-index:100;border:1px solid var(--modern-c-divider-light)"><div font="medium"><a class="R5q4o " target="" cursor="pointer" href="/module-tools/api/config/design-system"><div class="rounded-md" hover="bg-mute" p="y-1.6 l-3 r-6"><div flex="~"><span m="r-1">简体中文<svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1 l-1" class="inline-block align-text-top"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></span></div></div></a></div><div class="rounded-md" p="y-1.6 l-3"><span m="r-1" text="brand">English</span></div></div></div></div></div></div><div class="WjR05 modern-doc-appearance" display="none sm:flex" align-items-center="center"><button class="DdK0_ undefined" id="" type="button" role="switch"><span class="WLpap"><span class="Q_Ula"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="JMkpU"><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="tgdgB"><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg></span></span></button></div><div class="social-links FU7nx" nav-h="mobile sm:desktop" flex="~" align-items-center="~" pos="relative"><div h="full" flex="~" gap="x-4" align-items-center="~" transition="color duration-300"><a href="https://github.com/modern-js-dev/modern.js/tree/main/packages/solutions/module-tools" target="_blank" rel="noopener noreferrer"><div class="_8YjQ"><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><button class=" wzxr1"><span class="kECx4"><span class="wzOB6"></span><span class="coO8e"></span><span class="RrwJk"></span></span></button><div class="NeczB " id="navScreen"><div class="WLObZ"><div class="_3YuLy"><div w="full" class="osgV9"><div text="sm" font="medium" m="x-3" class=""><a class="R5q4o " target="" cursor="pointer" href="/module-tools/en/guide/intro/welcome.html">Guide</a></div></div><div w="full" class="osgV9"><div text="sm" font="medium" m="x-3" class="text-brand"><a class="R5q4o " target="" cursor="pointer" href="/module-tools/en/api/index.html">API</a></div></div><div w="full" class="osgV9"><div text="sm" font="medium" m="x-3" class=""><a class="R5q4o " target="" cursor="pointer" href="/module-tools/en/plugins/guide/getting-started.html">Plugins</a></div></div><div w="full" class="osgV9"><div m="x-3" last="mr-0"><div pos="relative" class=" Tk5bz"><button class="X7ejb"><span class="IOfpr">v2.2.0</span><svg width="1em" height="1em" viewBox="0 0 32 32" class=" uavm2 "><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div><div class="ciUdc"><div class="pa-1" font="medium"><a href="https://github.com/modern-js-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="R5q4o "><div><div flex="~"><span m="r-1">Changelog</span><svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></div></div></a></div><div class="pa-1" font="medium"><a href="https://github.com/modern-js-dev/modern.js/tree/main/packages/solutions/module-tools/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="R5q4o "><div><div flex="~"><span m="r-1">Contributing</span><svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></div></div></a></div></div></div></div></div></div></div><div class="rp9pY" flex="~" justify="center" align-items-center="center"><div class="align-items-center appearance pa-2 ctzdQ" flex="~" justify="center"><button class="DdK0_ undefined" id="" type="button" role="switch"><span class="WLpap"><span class="Q_Ula"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="JMkpU"><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24" class="tgdgB"><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg></span></span></button></div></div><div flex="~" text="sm" font="bold" justify="center"><div m="x-1.5"><div pos="relative" class=" Tk5bz"><button class="X7ejb"><span class="IOfpr"><svg width="32" height="32" viewBox="0 0 32 32" w="18px" h="18px"><path fill="currentColor" d="M27.85 29H30l-6-15h-2.35l-6 15h2.15l1.6-4h6.85zm-7.65-6l2.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=" uavm2 "><path fill="currentColor" d="M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z"></path></svg></button><div><div class="ciUdc"><div class="pa-1" font="medium"><a class="R5q4o " target="" cursor="pointer" href="/module-tools/zh"><div><div flex="~"><span m="r-1">简体中文</span><svg width="32" height="32" viewBox="0 0 32 32" w="11px" h="11px" text="text-3" m="t-1 r-1"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z"></path></svg></div></div></a></div><div class="pa-1"><span m="r-1" text="brand">English</span></div></div></div></div></div></div><div class="social-links FU7nx" nav-h="mobile sm:desktop" flex="~" align-items-center="~" pos="relative"><div h="full" flex="~" gap="x-4" align-items-center="~" transition="color duration-300"><a href="https://github.com/modern-js-dev/modern.js/tree/main/packages/solutions/module-tools" target="_blank" rel="noopener noreferrer"><div class="_8YjQ"><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></div></div></header><section><div p="t-0" m="md:t-14" class="Q34AI"><div class="_aGGP"><button flex="~ center" class="wNUbj"><div text="md" m="r-2"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M4 6h24v2H4zm0 18h24v2H4zm0-12h24v2H4zm0 6h24v2H4z"></path></svg></div><span text="sm">Menu</span></button></div><aside class="UroNu "><nav m="t-1"><section block="~" class="mt-1"><div flex="~" justify="between" items-start="~" cursor="pointer" class="items-center r3Oz1"><h2 p="y-1 x-2" text="sm" font="semibold">Config</h2><div p="2" class="BgJSm"><div cursor-pointer="~" style="transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16L12 26l-1.4-1.4l8.6-8.6l-8.6-8.6L12 6z"></path></svg></div></div></div><div style="transition:height 0.2s ease-in-out;overflow:hidden;height:160px"><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/en/api/config/build-config.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">BuildConfig</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/en/api/config/build-preset.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">BuildPreset</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/en/api/config/design-system.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="RCb_U" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">DesignSystem</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/en/api/config/plugins.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Plugins</div></a></div><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/en/api/config/testing.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Testing</div></a></div></div></section><section block="~" class="mt-1"><div flex="~" justify="between" items-start="~" cursor="pointer" class="items-center r3Oz1"><h2 p="y-1 x-2" text="sm" font="semibold">Plugin API</h2><div p="2" class="BgJSm"><div cursor-pointer="~" style="transition:transform 0.2s ease-out;transform:rotate(90deg)"><svg width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M22 16L12 26l-1.4-1.4l8.6-8.6l-8.6-8.6L12 6z"></path></svg></div></div></div><div style="transition:height 0.2s ease-in-out;overflow:hidden;height:32px"><div m="last:b-0.5 l-4"><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/en/api/plugin-api/plugin-hooks.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Plugin Hooks</div></a></div></div></section><a class="R5q4o EZlU3" target="" cursor="pointer" href="/module-tools/en/api/index.html"><div m="t-1" p="y-1 x-2" block="~" border="rounded-sm" font-medium="~" class="r3Oz1" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Overview</div></a></nav></aside><div flex="~ shrink-0" class="TP8A7"><div w="full"><div class="modern-doc"><!--$--><h1 id="designsystem"><a class="header-anchor" aria-hidden="true" href="#designsystem">#</a>DesignSystem</h1>
-<p>This chapter describes the configuration related to designSystem</p>
-<div class="modern-directive tip"><p class="modern-directive-title">TIP</p><div class="modern-directive-content"><p>
-The Tailwind CSS feature needs to be enabled first via <code>pnpm run new</code>.</p></div></div>
-<ul>
-<li>type: <code>Object</code></li>
-<li>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"><p class="modern-directive-title">TIP</p><div class="modern-directive-content"><p>
-More about <a href="https://tailwindcss.com/docs/configuration#theme-1" target="_blank" rel="nofollow">TailwindCSS configuration</a></p></div></div>
-<!-- -->
-<p>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>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"><a class="header-anchor" aria-hidden="true" href="#screens">#</a>Screens</h2>
-<p>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>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>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>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>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"><a class="header-anchor" aria-hidden="true" href="#max-width-breakpoints">#</a>Max-width breakpoints</h3>
-<p>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>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"><a class="header-anchor" aria-hidden="true" href="#multiple-range-breakpoints">#</a>Multiple range breakpoints</h3>
-<p>Sometimes it can be useful to apply a single breakpoint definition to multiple scopes.</p>
-<p>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"><a class="header-anchor" aria-hidden="true" href="#custom-media-queries">#</a>Custom media queries</h3>
-<p>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"><a class="header-anchor" aria-hidden="true" href="#print-styles">#</a>Print styles</h3>
-<p>The <code>raw</code> option may be particularly useful if you need to apply different styles to printing.</p>
-<p>All that needs to be done is to add a <code>print</code> under <code>designSystem.extend.screens</code>.</p>
-<p>``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"><a class="header-anchor" aria-hidden="true" href="#dark-mode">#</a>Dark Mode</h3>
-<p><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>然后，您可以使用 <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>请注意，由于这些 <code>screen variants</code> 是在 <code>Tailwind CSS</code> 中实现的，因此<strong>无法使用这种方法将断点与暗模式结合使用</strong> ，例如 <code>md:dark:text-gray-300</code> 将不起作用。</p>
-<h2 id="colors"><a class="header-anchor" aria-hidden="true" href="#colors">#</a>Colors</h2>
-<p><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>By default, these colors are inherited by the <code>backgroundColor</code>, <code>textColor</code> and <code>borderColor</code> core plugins.</p>
-<p>To learn more, you can check out: <a href="https://tailwindcss.com/docs/customizing-colors" target="_blank" rel="nofollow">Customizing Colors</a>.</p>
-<h2 id="spacing"><a class="header-anchor" aria-hidden="true" href="#spacing">#</a>Spacing</h2>
-<p>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>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>To learn more, see <a href="https://tailwindcss.com/docs/customizing-spacing" target="_blank" rel="nofollow">Customizing Spacing</a>.</p>
-<h2 id="core-plugins"><a class="header-anchor" aria-hidden="true" href="#core-plugins">#</a>Core plugins</h2>
-<p>The rest of the theme section is used to configure the values available for each core plugin.</p>
-<p>For example, the <code>borderRadius</code> property allows you to customize the ``utilities` that will generate the rounded corners.</p>
-<p>``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>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>To learn more about customizing a specific core plugin, please visit the documentation for that plugin.</p>
-<h2 id="customizing-the-default-configuration"><a class="header-anchor" aria-hidden="true" href="#customizing-the-default-configuration">#</a>Customizing the default configuration</h2>
-<p>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"><a class="header-anchor" aria-hidden="true" href="#override-the-default-configuration">#</a>Override the default configuration</h3>
-<p>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>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>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"><a class="header-anchor" aria-hidden="true" href="#extending-the-default-configuration">#</a>Extending the default configuration</h3>
-<p>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>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>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"><a class="header-anchor" aria-hidden="true" href="#referencing-other-values">#</a>Referencing other values</h3>
-<p>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>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>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><strong>Reference to the default configuration</strong></p>
-<p>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"><a class="header-anchor" aria-hidden="true" href="#disabling-the-entire-core-plugin">#</a>Disabling the entire core plugin</h3>
-<p>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>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"><a class="header-anchor" aria-hidden="true" href="#adding-your-own-key">#</a>Adding your own key</h3>
-<p>In many cases it may be useful to add your own properties to the configuration object.</p>
-<p>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>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"><a class="header-anchor" aria-hidden="true" href="#configuration-references">#</a>Configuration references</h2>
-<p>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>All of these properties can also be used under the <code>designSystem.extend</code> property to extend the default theme.</p>
-<p>For more information about what all the properties do, check out this <a href="https://tailwindcss.com/docs/theme#configuration-reference-1" target="_blank" rel="nofollow">link</a>.</p><!--/$--><div><footer m="t-8"><div flex="~ col sm:row" justify="sm:around" gap="2" p="t-6"><div flex="~ col" class="ajVjQ"><a class="R5q4o pAnzs" target="" cursor="pointer" href="/module-tools/en/api/config/build-preset.html"><span class="rVEMI">Previous Page</span><span class="jr5Zr">BuildPreset</span></a></div><div flex="~ col" class="A2aco"><a class="R5q4o pAnzs A2aco" target="" cursor="pointer" href="/module-tools/en/api/config/plugins.html"><span class="rVEMI">Next page</span><span class="jr5Zr">Plugins</span></a></div></div></footer></div></div></div><div class="RsCtL" style="min-height:calc(100vh - (var(--modern-nav-height) + 32px))"><div><div flex="~ col"><div class="&lt;lg:hidden"><div p="l-4" text="sm" font-medium="~" id="aside-container" style="border-left:1px solid var(--modern-c-divider-light)" class="relative"><div class="absolute" opacity="0" w="1px" h="18px" bg="brand" style="top:33px;left:-1px;transition:top 0.25s cubic-bezier(0, 1, 0.5, 1), background-color 0.5s, opacity 0.25s" id="aside-marker"></div><div block="~" class="leading-7" text="sm" font="semibold">ON THIS PAGE</div><nav><ul class="relative"><li><a href="#screens" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Screens</a></li><li><a href="#max-width-breakpoints" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Max-width breakpoints</a></li><li><a href="#multiple-range-breakpoints" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Multiple range breakpoints</a></li><li><a href="#custom-media-queries" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Custom media queries</a></li><li><a href="#print-styles" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Print styles</a></li><li><a href="#dark-mode" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Dark Mode</a></li><li><a href="#colors" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Colors</a></li><li><a href="#spacing" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Spacing</a></li><li><a href="#core-plugins" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Core plugins</a></li><li><a href="#customizing-the-default-configuration" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Customizing the default configuration</a></li><li><a href="#override-the-default-configuration" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Override the default configuration</a></li><li><a href="#extending-the-default-configuration" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Extending the default configuration</a></li><li><a href="#referencing-other-values" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Referencing other values</a></li><li><a href="#disabling-the-entire-core-plugin" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Disabling the entire core plugin</a></li><li><a href="#adding-your-own-key" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Adding your own key</a></li><li><a href="#configuration-references" block="~" text="text-2" hover="text-text-1" transition="color duration-300" class="leading-7" style="font-size:13px;padding-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Configuration references</a></li></ul></nav></div></div></div></div></div></div></div></section></div></div></body></html>