text: _N_E=(window.webpackJsonp_N_E=window.webpackJsonp_N_E||[]).push([[182],{"5xSE":function(e,t,n){"use strict";e.exports=function(e){return"[object RegExp]"===Object.prototype.toString.call(e)}},"8C7G":function(e,t,n){"use strict";n.d(t,"a",(function(){return l}));var a=n("q1tI"),s=n.n(a),i=n("98BF"),o=n("Zb5r"),r=n("AOjV"),c=s.a.createElement;function l({plugin:e,name:t}){const n=i.defaultConfig.variants[e]||["responsive"];t=t||e.replace(/([a-z])([A-Z])/g,((e,t,n)=>`${t} ${n.toLowerCase()}`));const a=["responsive","hover","focus","active","group-hover"].filter((e=>!n.includes(e))).slice(0,2),s=`By default, ${n.length?`only ${Object(o.a)(n).replace("dark","dark mode <em>(if enabled)</em>")}`:"no"} variants are generated for ${t} utilities.`;return c("div",{className:"prose"},c("p",{dangerouslySetInnerHTML:{__html:s}}),c("p",null,"You can control which variants are generated for the ",t," utilities by modifying the"," ",c("code",null,e)," property in the ",c("code",null,"variants")," section of your"," ",c("code",null,"tailwind.config.js")," file."),c("p",null,"For example, this config will ",n.length>0?"also ":"","generate"," ",Object(o.a)(a)," variants:"),c(r.a,{path:"variants.extend",before:"...",add:{[e]:a}}))}},AOjV:function(e,t,n){"use strict";n.d(t,"a",(function(){return p}));var a=n("q1tI"),s=n.n(a),i=(n("Btb4"),n("AI3G")),o=n("iuhU"),r=s.a.createElement;function c({value:e}){return"string"===typeof e?r("span",{className:"token string"},"'",e,"'"):Array.isArray(e)?r(s.a.Fragment,null,r("span",{className:"token punctuation"},"["),e.map(((t,n)=>r(a.Fragment,{key:n},r(c,{value:t}),n===e.length-1?null:r("span",{className:"token punctuation"},", ")))),r("span",{className:"token punctuation"},"]")):"boolean"===typeof e?r("span",{className:"token boolean"},e.toString()):e.toString()}function l({edits:e,indent:t="",type:n="inserted"}){return r("span",{className:Object(o.a)("token",{"inserted-sign inserted":"inserted"===n,"deleted-sign deleted":"inserted"!==n})},Object.keys(e).map(((s,i)=>{return r(a.Fragment,{key:i},r("span",{className:Object(o.a)("token prefix",{inserted:"inserted"===n,deleted:"inserted"!==n})},"inserted"===n?"+":"-")," ",t,/^[a-z_$][a-z0-9_$]*$/i.test(l=s)?l:`'${l}'`,r("span",{className:"token operator"},":")," ",r(c,{value:e[s]}),r("span",{className:"token punctuation"},","),"\n");var l})))}function p({path:e,add:t,remove:n,before:s,after:o}){return e="string"===typeof e?e.split("."):e,r("div",{className:"prose"},r("div",{className:"my-6 rounded-xl overflow-hidden bg-gray-800"},r("pre",{className:"language-diff"},r("code",{className:"language-diff"},r("span",{className:"token unchanged"},"  ",r("span",{className:"token comment"},"// tailwind.config.js"),"\n","  module",r("span",{className:"token punctuation"},"."),r("span",{className:"token property-access"},"exports")," ",r("span",{className:"token operator"},"=")," ",r("span",{className:"token punctuation"},"{"),"\n",e.map(((e,t)=>r(a.Fragment,{key:t},"  ","  ".repeat(t+1),e,r("span",{className:"token operator"},":")," ",r("span",{className:"token punctuation"},"{"),"\n"))),s&&Object(i.a)(s).map(((t,n)=>r(a.Fragment,{key:n},"  ".repeat(e.length+2),r("span",{className:"token comment"},`// ${t}`),"\n")))),n&&r(l,{edits:n,type:"deleted",indent:"  ".repeat(e.length+1)}),t&&r(l,{edits:t,type:"inserted",indent:"  ".repeat(e.length+1)}),r("span",{className:"token unchanged"},o&&Object(i.a)(o).map((t=>`${"  ".repeat(e.length+2)}${t}\n`)),e.map(((t,n)=>r(a.Fragment,{key:n},"  ","  ".repeat(e.length-n),"}\n"))),"  }")))))}},Btb4:function(e,t,n){"use strict";const a=n("5xSE"),s=n("p+I8"),i=n("GAX2").default;e.exports=(e,t,n)=>{const o=[];return function e(t,n,r){let c;(n=n||{}).indent=n.indent||"\t",r=r||"",c=void 0===n.inlineCharacterLimit?{newLine:"\n",newLineOrSpace:"\n",pad:r,indent:r+n.indent}:{newLine:"@@__STRINGIFY_OBJECT_NEW_LINE__@@",newLineOrSpace:"@@__STRINGIFY_OBJECT_NEW_LINE_OR_SPACE__@@",pad:"@@__STRINGIFY_OBJECT_PAD__@@",indent:"@@__STRINGIFY_OBJECT_INDENT__@@"};const l=e=>{if(void 0===n.inlineCharacterLimit)return e;const t=e.replace(new RegExp(c.newLine,"g"),"").replace(new RegExp(c.newLineOrSpace,"g")," ").replace(new RegExp(c.pad+"|"+c.indent,"g"),"");return t.length<=n.inlineCharacterLimit?t:e.replace(new RegExp(c.newLine+"|"+c.newLineOrSpace,"g"),"\n").replace(new RegExp(c.pad,"g"),r).replace(new RegExp(c.indent,"g"),r+n.indent)};if(-1!==o.indexOf(t))return'"[Circular]"';if(null===t||void 0===t||"number"===typeof t||"boolean"===typeof t||"function"===typeof t||"symbol"===typeof t||a(t))return String(t);if(t instanceof Date)return`new Date('${t.toISOString()}')`;if(Array.isArray(t)){if(0===t.length)return"[]";o.push(t);const a="["+c.newLine+t.map(((a,s)=>{const i=t.length-1===s?c.newLine:","+c.newLineOrSpace;let o=e(a,n,r+n.indent);return n.transform&&(o=n.transform(t,s,o)),c.indent+o+i})).join("")+c.pad+"]";return o.pop(),l(a)}if(s(t)){let a=Object.keys(t).concat(i(t));if(n.filter&&(a=a.filter((e=>n.filter(t,e)))),0===a.length)return"{}";o.push(t);const s="{"+c.newLine+a.map(((s,i)=>{const o=a.length-1===i?c.newLine:","+c.newLineOrSpace,l="symbol"===typeof s,p=!l&&/^[a-z$_][a-z$_0-9]*$/i.test(s),u=l||p?s:e(s,n);let d=e(t[s],n,r+n.indent);return n.transform&&(d=n.transform(t,s,d)),c.indent+String(u)+": "+d+o})).join("")+c.pad+"}";return o.pop(),l(s)}return t=String(t).replace(/[\r\n]/g,(e=>"\n"===e?"\\n":"\\r")),!1===n.singleQuotes?`"${t=t.replace(/"/g,'\\"')}"`:`'${t=t.replace(/\\?'/g,"\\'")}'`}(e,t,n)}},GAX2:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=e=>Object.getOwnPropertySymbols(e).filter((t=>Object.prototype.propertyIsEnumerable.call(e,t)))},Zb5r:function(e,t,n){"use strict";function a(e){return e.reduce(((t,n,a)=>0===a?n:a===e.length-1?`${t} and ${n}`:`${t}, ${n}`),"")}n.d(t,"a",(function(){return a}))},aP1M:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs/visibility",function(){return n("fUQf")}])},cXWA:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(){return function({addUtilities:e,variants:t}){e({".visible":{visibility:"visible"},".invisible":{visibility:"hidden"}},t("visibility"))}}},fUQf:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return k}));var a=n("HALo"),s=n("dhJC"),i=n("q1tI"),o=n.n(i),r=n("7ljp"),c=n("YFqc"),l=n.n(c),p=n("tc9R"),u=n("pOT7"),d=n("vRWG"),g=n("I6Nb"),b=n("cXWA"),m=n.n(b),f=n("8C7G"),v=n("wH44");o.a.createElement;const h={Layout:d.DocumentationLayout,classes:{plugin:m()},meta:{title:"Visibility",description:"Utilities for controlling the visibility of an element.",features:{responsive:!0,customizable:!1,hover:!1,focus:!1}},tableOfContents:[{title:"Invisible",slug:"invisible",children:[]},{title:"Visible",slug:"visible",children:[]},{title:"Responsive",slug:"responsive",children:[]},{title:"Customizing",slug:"customizing",children:[{title:"Variants",slug:"variants"},{title:"Disabling",slug:"disabling"}]}]},O=g.ContentsLayout;function k(e){let{components:t}=e,n=Object(s.a)(e,["components"]);return Object(r.a)(O,Object(a.a)({},h,n,{components:t,mdxType:"MDXLayout"}),Object(r.a)("div",{className:"prose"},Object(r.a)(p.a,{level:2,id:"invisible",toc:!0},"Invisible"),Object(r.a)("p",null,"Use ",Object(r.a)("inlineCode",{parentName:"p"},"invisible")," to hide an element, but still maintain its place in the DOM, affecting the layout of other elements (compare with ",Object(r.a)("inlineCode",{parentName:"p"},".hidden")," from the ",Object(r.a)(l.a,{href:"/docs/display#hidden",passHref:!0},Object(r.a)("a",null,"display"))," documentation).")),Object(r.a)(u.a,{preview:'\n  <div class="rounded-md bg-indigo-500 w-32 h-16 flex items-center justify-center text-white text-3xl font-extrabold">1</div>\n  <div class="invisible rounded-md bg-indigo-500 w-32 h-16 flex items-center justify-center text-white text-3xl font-extrabold">2</div>\n  <div class="rounded-md bg-indigo-500 w-32 h-16 flex items-center justify-center text-white text-3xl font-extrabold">3</div>\n',src:void 0,snippet:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flex justify-center space-x-4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="code-highlight bg-code-highlight">invisible</span> ...<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>',previewClassName:"flex justify-center p-10 space-x-4",color:"indigo",min:!1}),Object(r.a)("div",{className:"prose"},Object(r.a)(p.a,{level:2,id:"visible",toc:!0},"Visible"),Object(r.a)("p",null,"Use ",Object(r.a)("inlineCode",{parentName:"p"},"visible")," to make an element visible. This is mostly useful for undoing the ",Object(r.a)("inlineCode",{parentName:"p"},"invisible")," utility at different screen sizes.")),Object(r.a)(u.a,{preview:'\n  <div class="rounded-md bg-purple-500 w-32 h-16 flex items-center justify-center text-white text-3xl font-extrabold">1</div>\n  <div class="visible rounded-md bg-purple-500 w-32 h-16 flex items-center justify-center text-white text-3xl font-extrabold">2</div>\n  <div class="rounded-md bg-purple-500 w-32 h-16 flex items-center justify-center text-white text-3xl font-extrabold">3</div>\n',src:void 0,snippet:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flex justify-center space-x-4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="code-highlight bg-code-highlight">visible</span> ...<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>',previewClassName:"flex justify-center p-10 space-x-4",color:"purple",min:!1}),Object(r.a)("div",{className:"prose"},Object(r.a)(p.a,{level:2,id:"responsive",toc:!0},"Responsive"),Object(r.a)("p",null,"To apply a visibility utility only at a specific breakpoint, add a ",Object(r.a)("inlineCode",{parentName:"p"},"{screen}:")," prefix to the existing class name. For example, adding the class ",Object(r.a)("inlineCode",{parentName:"p"},"md:invisible")," to an element would apply the ",Object(r.a)("inlineCode",{parentName:"p"},"invisible")," utility at medium screen sizes and above."),Object(r.a)("div",{className:"my-6 rounded-xl overflow-hidden bg-gray-800"},Object(r.a)("pre",Object(a.a)({parentName:"div"},{className:"language-html"}),Object(r.a)("code",Object(a.a)({parentName:"pre"},{className:"language-html"}),Object(r.a)("span",Object(a.a)({parentName:"code"},{className:"token tag"}),Object(r.a)("span",Object(a.a)({parentName:"span"},{className:"token tag"}),Object(r.a)("span",Object(a.a)({parentName:"span"},{className:"token punctuation"}),"<"),"div")," ",Object(r.a)("span",Object(a.a)({parentName:"span"},{className:"token attr-name"}),"class"),Object(r.a)("span",Object(a.a)({parentName:"span"},{className:"token attr-value"}),Object(r.a)("span",Object(a.a)({parentName:"span"},{className:"token punctuation attr-equals"}),"="),Object(r.a)("span",Object(a.a)({parentName:"span"},{className:"token punctuation"}),'"'),"visible ",Object(r.a)("span",Object(a.a)({parentName:"span"},{className:"code-highlight bg-code-highlight"}),"md:invisible")," ...",Object(r.a)("span",Object(a.a)({parentName:"span"},{className:"token punctuation"}),'"')),Object(r.a)("span",Object(a.a)({parentName:"span"},{className:"token punctuation"}),">")),Object(r.a)("span",Object(a.a)({parentName:"code"},{className:"token tag"}),Object(r.a)("span",Object(a.a)({parentName:"span"},{className:"token tag"}),Object(r.a)("span",Object(a.a)({parentName:"span"},{className:"token punctuation"}),"</"),"div"),Object(r.a)("span",Object(a.a)({parentName:"span"},{className:"token punctuation"}),">"))))),Object(r.a)("p",null,"For more information about Tailwind\u2019s responsive design features, check out the ",Object(r.a)(l.a,{href:"/docs/responsive-design",passHref:!0},Object(r.a)("a",null,"Responsive Design"))," documentation."),Object(r.a)(p.a,{level:2,id:"customizing",toc:!0},"Customizing"),Object(r.a)(p.a,{level:3,id:"variants",toc:!0},"Variants")),Object(r.a)(f.a,{plugin:"visibility",mdxType:"Variants"}),Object(r.a)("div",{className:"prose"},Object(r.a)(p.a,{level:3,id:"disabling",toc:!0},"Disabling")),Object(r.a)(v.a,{plugin:"visibility",mdxType:"Disabling"}))}k.isMDXComponent=!0,k.layoutProps=h},"p+I8":function(e,t,n){"use strict";e.exports=function(e){var t=typeof e;return null!==e&&("object"===t||"function"===t)}},pOT7:function(e,t,n){"use strict";n.d(t,"a",(function(){return m})),n.d(t,"b",(function(){return f}));var a=n("HALo"),s=n("q1tI"),i=n.n(s),o=n("iuhU"),r=n("ZMKu"),c=i.a.createElement;const l={amber:"bg-amber-500",emerald:"bg-emerald-500",fuchsia:"bg-fuchsia-400",indigo:"bg-indigo-400",lightBlue:"bg-light-blue-500",purple:"bg-purple-400",rose:"bg-rose-400"},p={amber:"bg-gradient-to-r from-amber-50 to-amber-100",emerald:"bg-gradient-to-r from-emerald-50 to-teal-100",fuchsia:"bg-gradient-to-r from-fuchsia-50 to-fuchsia-100",gray:"bg-gradient-to-r from-gray-50 to-gray-100",indigo:"bg-gradient-to-r from-indigo-50 to-indigo-100",lightBlue:"bg-gradient-to-r from-light-blue-50 to-light-blue-100",purple:"bg-gradient-to-r from-purple-50 to-purple-100",rose:"bg-gradient-to-r from-rose-50 to-rose-100"},u={amber:"bg-stripes bg-stripes-amber-500 bg-amber-100",emerald:"bg-stripes bg-stripes-emerald-500 bg-emerald-100",fuchsia:"bg-stripes bg-stripes-fuchsia-500 bg-fuchsia-100",indigo:"bg-stripes bg-stripes-indigo-500 bg-indigo-100",lightBlue:"bg-stripes bg-stripes-light-blue-500 bg-light-blue-100",purple:"bg-stripes bg-stripes-purple-500 bg-purple-100",rose:"bg-stripes bg-stripes-rose-500 bg-rose-100"},d={amber:"text-amber-700",emerald:"text-emerald-700",fuchsia:"text-fuchsia-700",indigo:"text-indigo-700",lightBlue:"text-light-blue-700",purple:"text-purple-700",rose:"text-rose-700"};function g(e){const t=Object(s.useRef)(),{0:n,1:i}=Object(s.useState)(!1),{0:o,1:r}=Object(s.useState)({});return Object(s.useEffect)((()=>{if(!n)return;function e(){r({height:t.current.contentDocument.body.scrollHeight})}const a=new window.ResizeObserver(e);return e(),a.observe(t.current.contentDocument.body),()=>{a.disconnect()}}),[n]),c("iframe",Object(a.a)({},e,{ref:t,onLoad:()=>i(!0),style:o}))}function b({color:e,snippet:t}){return c("div",{className:Object(o.a)("overflow-hidden rounded-b-xl",l[e],{"bg-gray-800":!l[e]})},c("pre",{className:Object(o.a)("scrollbar-none overflow-x-auto p-6 text-sm leading-snug language-html text-white",{"bg-black bg-opacity-75":l[e]})},c("code",{className:"language-html",dangerouslySetInnerHTML:{__html:t}})))}function m({preview:e,src:t,snippet:n,previewClassName:a,color:s="gray"}){return c("div",{className:"relative overflow-hidden mb-8"},e?c("div",{className:Object(o.a)("rounded-t-xl overflow-hidden",p[s],a,{"p-10":!a}),dangerouslySetInnerHTML:{__html:e}}):c(g,{src:t,className:Object(o.a)("w-full rounded-t-xl",p[s])}),c(b,{color:s,snippet:n}))}function f({preview:e,src:t,previewClassName:n,snippet:a,color:i="gray",min:l=!1}){const m=Object(s.useRef)(),f=Object(r.h)(0),v=Object(s.useRef)(),{0:h,1:O}=Object(s.useState)(!1);return Object(s.useEffect)((()=>{const e=new window.ResizeObserver((()=>{f.set(0)}));return e.observe(m.current),()=>{e.disconnect()}}),[]),c("div",{className:"relative mb-8"},c("div",{ref:m,className:`relative rounded-t-xl ${u[i]}`},c("div",{className:l?"md:w-88":void 0},c(r.d.div,{className:"relative",style:{marginRight:Object(r.i)(f,(e=>-e))}},e?c("div",{className:Object(o.a)("rounded-t-xl",n,p[i],{"p-10":!n}),dangerouslySetInnerHTML:{__html:e}}):c(g,{src:t,className:Object(o.a)("w-full rounded-t-xl",p[i],{"pointer-events-none":h})}))),c("div",{ref:v,className:"absolute inset-y-0 -right-4 left-80 ml-4 pointer-events-none"},c(r.d.div,{drag:"x",_dragX:f,dragMomentum:!1,dragElastic:0,dragConstraints:v,className:"pointer-events-auto absolute top-1/2 -mt-4 w-8 hidden md:flex items-center justify-center cursor-grab active:cursor-grabbing "+(l?"right-0 md:left-0 md:right-auto":"right-0"),style:{x:f},onDragStart:()=>{document.body.classList.add("cursor-grabbing"),O(!0)},onDragEnd:()=>{document.body.classList.remove("cursor-grabbing"),O(!1)}},c("div",{className:"flex-none rounded bg-white shadow flex items-center justify-center h-8",style:{width:"0.9375rem"}},c("svg",{viewBox:"0 0 14 24",fill:"none",strokeWidth:"2",stroke:"currentColor",className:`h-3 flex-none ${d[i]}`,style:{width:"0.4375rem"}},c("path",{d:"M 1 0 V 24 M 7 0 V 24 M 13 0 V 24"})))))),c(b,{color:i,snippet:a}))}},wH44:function(e,t,n){"use strict";n.d(t,"a",(function(){return d}));var a=n("cpVT"),s=n("q1tI"),i=n.n(s),o=n("AOjV"),r=n("AI3G"),c=n("Zb5r"),l=i.a.createElement;function p(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function u(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?p(Object(n),!0).forEach((function(t){Object(a.a)(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):p(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function d({plugin:e,name:t}){const n=Object(r.a)(e);return t=t||e.replace(/([a-z])([A-Z])/g,((e,t,n)=>`${t} ${n.toLowerCase()}`)),l("div",{className:"prose"},l("p",null,"If you don't plan to use the ",t," utilities in your project, you can disable them entirely by setting the"," ",l("span",{dangerouslySetInnerHTML:{__html:Object(c.a)(n.map((e=>`<code>${e}</code>`)))}})," ",n.length>1?"properties":"property"," to ",l("code",null,"false")," in the"," ",l("code",null,"corePlugins")," section of your config file:"),l(o.a,{path:"corePlugins",before:"...",add:n.reduce(((e,t)=>u(u({},e),{},{[t]:!1})),{})}))}}},[["aP1M",0,2,6,1,3,4,5,7]]]);