[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"\u002Fblog\u002Ftailwind-css-4-breakpoint-override":3,"$fdfjPnqtOdhk2tPK8HtB6HM92gksNH5iJhAHyBIdlx68":909,"i-local-icon:calendar-days":913,"i-local-icon:tag":918,"i-local-icon:eye":920},{"id":4,"title":5,"body":6,"categories_slug":899,"comment_count":901,"date_published":902,"description":903,"extension":62,"meta":904,"navigation":117,"path":905,"seo":906,"stem":907,"__hash__":908},"content\u002Fblog\u002F15.tailwind-css-4-breakpoint-override.md","Tailwind CSS 4 - Overriding or replacing screen sizes (breakpoints)",{"type":7,"value":8,"toc":879},"minimark",[9,13,18,23,27,39,44,47,82,86,94,210,226,238,242,247,316,332,336,339,397,412,416,419,491,498,502,505,564,571,585,589,592,596,656,659,710,714,717,805,809,813,826,830,839,843,851,855,858,872,875],[10,11,5],"h1",{"id":12},"tailwind-css-4-overriding-or-replacing-screen-sizes-breakpoints",[14,15],"meta-card",{":categories":16,":date":17},"categories_slug","date_published",[19,20,22],"h2",{"id":21},"overview","Overview",[24,25,26],"p",{},"Tailwind CSS version 4 introduces a significant architectural change by moving from JavaScript configuration to a CSS-first approach. This shift provides better performance, simpler configuration, and improved developer experience. Because of this change, extending or overriding screen sizes has evolved considerably.",[24,28,29,30,34,35,38],{},"In Tailwind CSS version 3 (and before), the config option was called ",[31,32,33],"em",{},"'screens'",", but in version 4, it's now referred to as ",[31,36,37],{},"'breakpoint'",". This change reflects the new CSS variable-based system that powers the framework.",[40,41,43],"h3",{"id":42},"default-breakpoints-in-tailwind-css-4","Default Breakpoints in Tailwind CSS 4",[24,45,46],{},"For reference, here are the default breakpoints in Tailwind CSS 4:",[48,49,50,58,64,70,76],"ul",{},[51,52,53,57],"li",{},[54,55,56],"strong",{},"sm",": 640px (small screens and up)",[51,59,60,63],{},[54,61,62],{},"md",": 768px (medium screens and up)",[51,65,66,69],{},[54,67,68],{},"lg",": 1024px (large screens and up)",[51,71,72,75],{},[54,73,74],{},"xl",": 1280px (extra large screens and up)",[51,77,78,81],{},[54,79,80],{},"2xl",": 1536px (2x extra large screens and up)",[19,83,85],{"id":84},"tailwind-css-version-3-updating-default-screen-size-values","Tailwind CSS version 3 - updating default screen size values",[24,87,88,89,93],{},"In Tailwind CSS 3, to update existing screen sizes, you would add the following code to your ",[90,91,92],"code",{},"tailwind.config.js"," file:",[95,96,101],"pre",{"className":97,"code":98,"language":99,"meta":100,"style":100},"language-javascript shiki shiki-themes github-dark","\u002F* Tailwind CSS 3 - tailwind.config.js *\u002F\n\nexport default {\n  theme: {\n    extend: {\n      screens: {\n        sm: \"480px\",\n        md: \"768px\",\n        lg: \"976px\",\n      },\n    },\n  },\n};\n","javascript","",[90,102,103,112,119,133,139,145,151,164,175,186,192,198,204],{"__ignoreMap":100},[104,105,108],"span",{"class":106,"line":107},"line",1,[104,109,111],{"class":110},"sAwPA","\u002F* Tailwind CSS 3 - tailwind.config.js *\u002F\n",[104,113,115],{"class":106,"line":114},2,[104,116,118],{"emptyLinePlaceholder":117},true,"\n",[104,120,122,126,129],{"class":106,"line":121},3,[104,123,125],{"class":124},"snl16","export",[104,127,128],{"class":124}," default",[104,130,132],{"class":131},"s95oV"," {\n",[104,134,136],{"class":106,"line":135},4,[104,137,138],{"class":131},"  theme: {\n",[104,140,142],{"class":106,"line":141},5,[104,143,144],{"class":131},"    extend: {\n",[104,146,148],{"class":106,"line":147},6,[104,149,150],{"class":131},"      screens: {\n",[104,152,154,157,161],{"class":106,"line":153},7,[104,155,156],{"class":131},"        sm: ",[104,158,160],{"class":159},"sU2Wk","\"480px\"",[104,162,163],{"class":131},",\n",[104,165,167,170,173],{"class":106,"line":166},8,[104,168,169],{"class":131},"        md: ",[104,171,172],{"class":159},"\"768px\"",[104,174,163],{"class":131},[104,176,178,181,184],{"class":106,"line":177},9,[104,179,180],{"class":131},"        lg: ",[104,182,183],{"class":159},"\"976px\"",[104,185,163],{"class":131},[104,187,189],{"class":106,"line":188},10,[104,190,191],{"class":131},"      },\n",[104,193,195],{"class":106,"line":194},11,[104,196,197],{"class":131},"    },\n",[104,199,201],{"class":106,"line":200},12,[104,202,203],{"class":131},"  },\n",[104,205,207],{"class":106,"line":206},13,[104,208,209],{"class":131},"};\n",[24,211,212,213,216,217,219,220,222,223,225],{},"By adding this configuration into the ",[31,214,215],{},"extend"," section of the theme config, this will replace the values for ",[90,218,56],{},", ",[90,221,62],{},", and ",[90,224,68],{},".",[24,227,228,231,232,234,235,237],{},[54,229,230],{},"Note:"," Tailwind CSS has 5 default values, so in this case, the values for ",[90,233,74],{}," and ",[90,236,80],{}," would remain unchanged.",[19,239,241],{"id":240},"tailwind-css-version-3-override-default-screen-sizes","Tailwind CSS version 3 - override default screen sizes",[24,243,244,245,93],{},"In Tailwind CSS 3, to completely override existing screen sizes, you would add the following code to your ",[90,246,92],{},[95,248,250],{"className":97,"code":249,"language":99,"meta":100,"style":100},"\u002F* Tailwind CSS 3 - tailwind.config.js *\u002F\n\nexport default {\n  theme: {\n    screens: {\n      sm: \"480px\",\n      md: \"768px\",\n      lg: \"976px\",\n    },\n  },\n};\n",[90,251,252,256,260,268,272,277,286,295,304,308,312],{"__ignoreMap":100},[104,253,254],{"class":106,"line":107},[104,255,111],{"class":110},[104,257,258],{"class":106,"line":114},[104,259,118],{"emptyLinePlaceholder":117},[104,261,262,264,266],{"class":106,"line":121},[104,263,125],{"class":124},[104,265,128],{"class":124},[104,267,132],{"class":131},[104,269,270],{"class":106,"line":135},[104,271,138],{"class":131},[104,273,274],{"class":106,"line":141},[104,275,276],{"class":131},"    screens: {\n",[104,278,279,282,284],{"class":106,"line":147},[104,280,281],{"class":131},"      sm: ",[104,283,160],{"class":159},[104,285,163],{"class":131},[104,287,288,291,293],{"class":106,"line":153},[104,289,290],{"class":131},"      md: ",[104,292,172],{"class":159},[104,294,163],{"class":131},[104,296,297,300,302],{"class":106,"line":166},[104,298,299],{"class":131},"      lg: ",[104,301,183],{"class":159},[104,303,163],{"class":131},[104,305,306],{"class":106,"line":177},[104,307,197],{"class":131},[104,309,310],{"class":106,"line":188},[104,311,203],{"class":131},[104,313,314],{"class":106,"line":194},[104,315,209],{"class":131},[24,317,318,319,216,321,219,323,222,325,327,328,234,330,225],{},"By adding this configuration without the ",[31,320,215],{},[90,322,56],{},[90,324,62],{},[90,326,68],{}," while also removing the values completely for ",[90,329,74],{},[90,331,80],{},[19,333,335],{"id":334},"tailwind-css-version-4-updating-default-screen-size-values-now-referred-to-as-breakpoints","Tailwind CSS version 4 - updating default screen size values (now referred to as breakpoints)",[24,337,338],{},"In Tailwind CSS 4, to update existing screen sizes, you would add the following code to your global CSS file:",[95,340,344],{"className":341,"code":342,"language":343,"meta":100,"style":100},"language-css shiki shiki-themes github-dark","\u002F* Tailwind CSS 4 - eg. main.css *\u002F\n\n@import \"tailwindcss\";\n\n@theme {\n  --breakpoint-sm: 480px;\n  --breakpoint-md: 768px;\n  --breakpoint-lg: 976px;\n}\n","css",[90,345,346,351,355,366,370,377,382,387,392],{"__ignoreMap":100},[104,347,348],{"class":106,"line":107},[104,349,350],{"class":110},"\u002F* Tailwind CSS 4 - eg. main.css *\u002F\n",[104,352,353],{"class":106,"line":114},[104,354,118],{"emptyLinePlaceholder":117},[104,356,357,360,363],{"class":106,"line":121},[104,358,359],{"class":124},"@import",[104,361,362],{"class":159}," \"tailwindcss\"",[104,364,365],{"class":131},";\n",[104,367,368],{"class":106,"line":135},[104,369,118],{"emptyLinePlaceholder":117},[104,371,372,375],{"class":106,"line":141},[104,373,374],{"class":124},"@theme",[104,376,132],{"class":131},[104,378,379],{"class":106,"line":147},[104,380,381],{"class":131},"  --breakpoint-sm: 480px;\n",[104,383,384],{"class":106,"line":153},[104,385,386],{"class":131},"  --breakpoint-md: 768px;\n",[104,388,389],{"class":106,"line":166},[104,390,391],{"class":131},"  --breakpoint-lg: 976px;\n",[104,393,394],{"class":106,"line":177},[104,395,396],{"class":131},"}\n",[24,398,399,400,219,402,222,404,406,407,234,409,411],{},"This configuration will replace the values for ",[31,401,56],{},[31,403,62],{},[31,405,68],{}," while leaving the values for ",[31,408,74],{},[31,410,80],{}," unchanged.",[19,413,415],{"id":414},"practical-example","Practical Example",[24,417,418],{},"Here's a real-world scenario where you might want to customize breakpoints for better mobile-first design:",[95,420,422],{"className":341,"code":421,"language":343,"meta":100,"style":100},"\u002F* Custom breakpoints for a mobile-heavy audience *\u002F\n@import \"tailwindcss\";\n\n@theme {\n  --breakpoint-xs: 320px; \u002F* Extra small phones *\u002F\n  --breakpoint-sm: 480px; \u002F* Small phones *\u002F\n  --breakpoint-md: 768px; \u002F* Tablets *\u002F\n  --breakpoint-lg: 976px; \u002F* Small laptops *\u002F\n  --breakpoint-xl: 1200px; \u002F* Desktop *\u002F\n}\n",[90,423,424,429,437,441,447,455,463,471,479,487],{"__ignoreMap":100},[104,425,426],{"class":106,"line":107},[104,427,428],{"class":110},"\u002F* Custom breakpoints for a mobile-heavy audience *\u002F\n",[104,430,431,433,435],{"class":106,"line":114},[104,432,359],{"class":124},[104,434,362],{"class":159},[104,436,365],{"class":131},[104,438,439],{"class":106,"line":121},[104,440,118],{"emptyLinePlaceholder":117},[104,442,443,445],{"class":106,"line":135},[104,444,374],{"class":124},[104,446,132],{"class":131},[104,448,449,452],{"class":106,"line":141},[104,450,451],{"class":131},"  --breakpoint-xs: 320px; ",[104,453,454],{"class":110},"\u002F* Extra small phones *\u002F\n",[104,456,457,460],{"class":106,"line":147},[104,458,459],{"class":131},"  --breakpoint-sm: 480px; ",[104,461,462],{"class":110},"\u002F* Small phones *\u002F\n",[104,464,465,468],{"class":106,"line":153},[104,466,467],{"class":131},"  --breakpoint-md: 768px; ",[104,469,470],{"class":110},"\u002F* Tablets *\u002F\n",[104,472,473,476],{"class":106,"line":166},[104,474,475],{"class":131},"  --breakpoint-lg: 976px; ",[104,477,478],{"class":110},"\u002F* Small laptops *\u002F\n",[104,480,481,484],{"class":106,"line":177},[104,482,483],{"class":131},"  --breakpoint-xl: 1200px; ",[104,485,486],{"class":110},"\u002F* Desktop *\u002F\n",[104,488,489],{"class":106,"line":188},[104,490,396],{"class":131},[24,492,493,494,497],{},"This allows you to use classes like ",[90,495,496],{},"xs:text-sm md:text-base lg:text-lg"," for more granular responsive control.",[19,499,501],{"id":500},"tailwind-css-version-4-overriding-default-screen-sizes-now-referred-to-as-breakpoints","Tailwind CSS version 4 - overriding default screen sizes (now referred to as breakpoints)",[24,503,504],{},"In Tailwind CSS 4, to completely override existing screen sizes, you would add the following code to your global CSS file:",[95,506,508],{"className":341,"code":507,"language":343,"meta":100,"style":100},"\u002F* Tailwind CSS 4 - eg. main.css *\u002F\n\n@import \"tailwindcss\";\n\n@theme {\n  --breakpoint-*: initial;\n  --breakpoint-sm: 480px;\n  --breakpoint-md: 768px;\n  --breakpoint-lg: 976px;\n}\n",[90,509,510,514,518,526,530,536,548,552,556,560],{"__ignoreMap":100},[104,511,512],{"class":106,"line":107},[104,513,350],{"class":110},[104,515,516],{"class":106,"line":114},[104,517,118],{"emptyLinePlaceholder":117},[104,519,520,522,524],{"class":106,"line":121},[104,521,359],{"class":124},[104,523,362],{"class":159},[104,525,365],{"class":131},[104,527,528],{"class":106,"line":135},[104,529,118],{"emptyLinePlaceholder":117},[104,531,532,534],{"class":106,"line":141},[104,533,374],{"class":124},[104,535,132],{"class":131},[104,537,538,541,545],{"class":106,"line":147},[104,539,540],{"class":131},"  --breakpoint-",[104,542,544],{"class":543},"s4JwU","*",[104,546,547],{"class":131},": initial;\n",[104,549,550],{"class":106,"line":153},[104,551,381],{"class":131},[104,553,554],{"class":106,"line":166},[104,555,386],{"class":131},[104,557,558],{"class":106,"line":177},[104,559,391],{"class":131},[104,561,562],{"class":106,"line":188},[104,563,396],{"class":131},[24,565,566,567,570],{},"By adding the line ",[90,568,569],{},"--breakpoint-\\*: initial;",", this will reset all the default breakpoints and allow you to define them from scratch.",[24,572,573,574,219,576,222,578,580,581,234,583,225],{},"So the above configuration will replace the values for ",[90,575,56],{},[90,577,62],{},[90,579,68],{}," and remove the values for ",[90,582,74],{},[90,584,80],{},[19,586,588],{"id":587},"migration-tips-from-tailwind-css-3-to-4","Migration Tips from Tailwind CSS 3 to 4",[24,590,591],{},"When migrating your breakpoint configuration from Tailwind CSS 3 to 4, keep these points in mind:",[40,593,595],{"id":594},"_1-convert-javascript-to-css-variables","1. Convert JavaScript to CSS Variables",[95,597,599],{"className":97,"code":598,"language":99,"meta":100,"style":100},"\u002F\u002F Tailwind CSS 3 - tailwind.config.js\nscreens: {\n  'tablet': '640px',\n  'laptop': '1024px',\n  'desktop': '1280px',\n}\n",[90,600,601,606,615,628,640,652],{"__ignoreMap":100},[104,602,603],{"class":106,"line":107},[104,604,605],{"class":110},"\u002F\u002F Tailwind CSS 3 - tailwind.config.js\n",[104,607,608,612],{"class":106,"line":114},[104,609,611],{"class":610},"svObZ","screens",[104,613,614],{"class":131},": {\n",[104,616,617,620,623,626],{"class":106,"line":121},[104,618,619],{"class":159},"  'tablet'",[104,621,622],{"class":131},": ",[104,624,625],{"class":159},"'640px'",[104,627,163],{"class":131},[104,629,630,633,635,638],{"class":106,"line":135},[104,631,632],{"class":159},"  'laptop'",[104,634,622],{"class":131},[104,636,637],{"class":159},"'1024px'",[104,639,163],{"class":131},[104,641,642,645,647,650],{"class":106,"line":141},[104,643,644],{"class":159},"  'desktop'",[104,646,622],{"class":131},[104,648,649],{"class":159},"'1280px'",[104,651,163],{"class":131},[104,653,654],{"class":106,"line":147},[104,655,396],{"class":131},[24,657,658],{},"Becomes:",[95,660,662],{"className":341,"code":661,"language":343,"meta":100,"style":100},"\u002F* Tailwind CSS 4 - main.css *\u002F\n\n@import \"tailwindcss\";\n\n@theme {\n  --breakpoint-tablet: 640px;\n  --breakpoint-laptop: 1024px;\n  --breakpoint-desktop: 1280px;\n}\n",[90,663,664,669,673,681,685,691,696,701,706],{"__ignoreMap":100},[104,665,666],{"class":106,"line":107},[104,667,668],{"class":110},"\u002F* Tailwind CSS 4 - main.css *\u002F\n",[104,670,671],{"class":106,"line":114},[104,672,118],{"emptyLinePlaceholder":117},[104,674,675,677,679],{"class":106,"line":121},[104,676,359],{"class":124},[104,678,362],{"class":159},[104,680,365],{"class":131},[104,682,683],{"class":106,"line":135},[104,684,118],{"emptyLinePlaceholder":117},[104,686,687,689],{"class":106,"line":141},[104,688,374],{"class":124},[104,690,132],{"class":131},[104,692,693],{"class":106,"line":147},[104,694,695],{"class":131},"  --breakpoint-tablet: 640px;\n",[104,697,698],{"class":106,"line":153},[104,699,700],{"class":131},"  --breakpoint-laptop: 1024px;\n",[104,702,703],{"class":106,"line":166},[104,704,705],{"class":131},"  --breakpoint-desktop: 1280px;\n",[104,707,708],{"class":106,"line":177},[104,709,396],{"class":131},[40,711,713],{"id":712},"_2-handle-complex-breakpoint-logic","2. Handle Complex Breakpoint Logic",[24,715,716],{},"Tailwind CSS 4 currently supports simple min-width breakpoints. If you were using complex media queries in v3, you may need to use custom CSS for advanced scenarios:",[95,718,720],{"className":341,"code":719,"language":343,"meta":100,"style":100},"\u002F* For complex breakpoints, use custom CSS *\u002F\n\n@media (min-width: 768px) and (max-width: 1023px) {\n  .tablet-only\\:block {\n    display: block;\n  }\n}\n",[90,721,722,727,731,772,785,796,801],{"__ignoreMap":100},[104,723,724],{"class":106,"line":107},[104,725,726],{"class":110},"\u002F* For complex breakpoints, use custom CSS *\u002F\n",[104,728,729],{"class":106,"line":114},[104,730,118],{"emptyLinePlaceholder":117},[104,732,733,736,739,743,745,748,751,754,757,759,762,764,767,769],{"class":106,"line":121},[104,734,735],{"class":124},"@media",[104,737,738],{"class":131}," (",[104,740,742],{"class":741},"sDLfK","min-width",[104,744,622],{"class":131},[104,746,747],{"class":741},"768",[104,749,750],{"class":124},"px",[104,752,753],{"class":131},") ",[104,755,756],{"class":124},"and",[104,758,738],{"class":131},[104,760,761],{"class":741},"max-width",[104,763,622],{"class":131},[104,765,766],{"class":741},"1023",[104,768,750],{"class":124},[104,770,771],{"class":131},") {\n",[104,773,774,777,780,783],{"class":106,"line":135},[104,775,776],{"class":610},"  .tablet-only",[104,778,779],{"class":741},"\\:",[104,781,782],{"class":610},"block",[104,784,132],{"class":131},[104,786,787,790,792,794],{"class":106,"line":141},[104,788,789],{"class":741},"    display",[104,791,622],{"class":131},[104,793,782],{"class":741},[104,795,365],{"class":131},[104,797,798],{"class":106,"line":147},[104,799,800],{"class":131},"  }\n",[104,802,803],{"class":106,"line":153},[104,804,396],{"class":131},[19,806,808],{"id":807},"troubleshooting-common-issues","Troubleshooting Common Issues",[40,810,812],{"id":811},"issue-breakpoints-not-working-after-migration","Issue: Breakpoints not working after migration",[24,814,815,818,819,822,823,825],{},[54,816,817],{},"Solution",": Ensure you're importing ",[90,820,821],{},"tailwindcss"," in your CSS file and that your ",[90,824,374],{}," block comes after the import.",[40,827,829],{"id":828},"issue-custom-breakpoint-names-not-recognized","Issue: Custom breakpoint names not recognized",[24,831,832,834,835,838],{},[54,833,817],{},": Remember that breakpoint names must follow the ",[90,836,837],{},"--breakpoint-"," prefix pattern. Invalid characters will be ignored.",[40,840,842],{"id":841},"issue-existing-v3-config-still-being-used","Issue: Existing v3 config still being used",[24,844,845,847,848,850],{},[54,846,817],{},": Make sure you've updated your build process to use the new CSS-first approach and removed or updated your ",[90,849,92],{}," file.",[19,852,854],{"id":853},"browser-compatibility","Browser Compatibility",[24,856,857],{},"The CSS variable approach used in Tailwind CSS 4 is supported in all modern browsers:",[48,859,860,863,866,869],{},[51,861,862],{},"Chrome 49+",[51,864,865],{},"Firefox 31+",[51,867,868],{},"Safari 9.1+",[51,870,871],{},"Edge 16+",[24,873,874],{},"For projects requiring Internet Explorer support, consider sticking with Tailwind CSS 3 or implementing appropriate fallbacks.",[876,877,878],"style",{},"html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}",{"title":100,"searchDepth":114,"depth":114,"links":880},[881,884,885,886,887,888,889,893,898],{"id":21,"depth":114,"text":22,"children":882},[883],{"id":42,"depth":121,"text":43},{"id":84,"depth":114,"text":85},{"id":240,"depth":114,"text":241},{"id":334,"depth":114,"text":335},{"id":414,"depth":114,"text":415},{"id":500,"depth":114,"text":501},{"id":587,"depth":114,"text":588,"children":890},[891,892],{"id":594,"depth":121,"text":595},{"id":712,"depth":121,"text":713},{"id":807,"depth":114,"text":808,"children":894},[895,896,897],{"id":811,"depth":121,"text":812},{"id":828,"depth":121,"text":829},{"id":841,"depth":121,"text":842},{"id":853,"depth":114,"text":854},[343,900],"tailwind",null,"2025-05-25","Learn how to override and customize screen sizes (breakpoints) in Tailwind CSS 4's new CSS-first configuration system. Includes migration tips, practical examples, and troubleshooting guide.",{},"\u002Fblog\u002Ftailwind-css-4-breakpoint-override",{"title":5,"description":903},"blog\u002F15.tailwind-css-4-breakpoint-override","cnqFlYH_wLh7-PaAqDLNSL8bVVtVzkcMas524hpwBOc",[910],{"id":911,"name":905,"count":912},29,12181,{"left":914,"top":914,"width":915,"height":915,"rotate":914,"vFlip":916,"hFlip":916,"body":917},0,24,false,"\u003Cpath\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    stroke-width=\"1.5\"\n    d=\"M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12zM12 15h.008v.008H12zm0 2.25h.008v.008H12zM9.75 15h.008v.008H9.75zm0 2.25h.008v.008H9.75zM7.5 15h.008v.008H7.5zm0 2.25h.008v.008H7.5zm6.75-4.5h.008v.008h-.008zm0 2.25h.008v.008h-.008zm0 2.25h.008v.008h-.008zm2.25-4.5h.008v.008H16.5zm0 2.25h.008v.008H16.5z\" \u002F>",{"left":914,"top":914,"width":915,"height":915,"rotate":914,"vFlip":916,"hFlip":916,"body":919},"\u003Cg\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    stroke-width=\"1.5\">\n    \u003Cpath\n      d=\"M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.1 18.1 0 0 0 5.224-5.223c.54-.827.368-1.908-.33-2.607l-9.583-9.58A2.25 2.25 0 0 0 9.568 3\" \u002F>\n    \u003Cpath d=\"M6 6h.008v.008H6z\" \u002F>\n  \u003C\u002Fg>",{"left":914,"top":914,"width":915,"height":915,"rotate":914,"vFlip":916,"hFlip":916,"body":921},"\u003Cg\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    stroke-width=\"1.5\">\n    \u003Cpath\n      d=\"M2.036 12.322a1 1 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178c.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178\" \u002F>\n    \u003Cpath d=\"M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0\" \u002F>\n  \u003C\u002Fg>"]